I cant get individual documents from a database using id?

I've been using Vue with a firebase database for my data I think where I'm going wrong is with the routing but I'm not 100% sure. what I've done so far is I've got a database with peoples profiles in it and I've use v-for to display all of these profiles out on the home page and now I'm trying to get it so that when you click on their individual profile you got to another page which will then fill the profile out according to a template using the id of the profile you've just clicked to fill in the page with that documents data.

What I know isn't happening is it isn't getting an id of a document because it should console log but it doesn't and it just displays the error message I made that it can't find the profile, as I said I'm pretty sure it is something that has to be done to the router, but I am not sure what to do and how to do it?

Here is the code below of the home page where you first see the profiles and select them.

<script>
import getPremium from "../Composables/getPremium.js";
import getStandard from "../Composables/getStandard.js";
import getBasic from "../Composables/getBasic.js";
const counter = useCounterStore();
const profile = useProfileStore();
const profileA = profilesbasic();
const {Premium, error, load} = getPremium();
load();
const {Standard, error2, load2} = getStandard();
load2();
const {Basic, error3, load3} = getBasic();
load3();
</script>

<template>

<div v-for =" Basics in Basic" :key="Basics.id" >
   <router-link to="/Samplebasic">
 <div class= "hover:scale-105 transition ease-in-out duration-300 bg-neutral-800 hover:bg-neutral-900 active:bg-neutral-900 text-neutral-400 font-bold rounded-xl">
  <br>
     <p>{{ Basics.name }}</p>
     <img src="../assets/Sample pic.png" class="object-contain ml-6 w-60 h-80 transition ease-in-out duration-300">
     <div class="grid grid-cols-2 grid-rows-fit text-left ml-6">
     <p>Age:</p>
     <p>{{ Basics.Age }}</p>
     <p>Location:</p>
     <p>{{ Basics.Location }}</p>
     <p>Phone:</p>
     <p>{{ Basics.Phone }}</p>
    
    </div><br>
  </div>
  </router-link>
  </div>
</template>

This is the JavaScript file that gets the documents from the database and is then imported to the home page.

import { projectFirestore } from "../Firebase/Config";
import { ref } from "vue"

const getBasic = () => {
    const Basic = ref([])
    const error3 = ref(null)

    const load3 = async () => {
        try{
            const res = await projectFirestore.collection('Basic').get()

            Basic.value = res.docs.map(doc => {
               console.log(doc.data())
               return {...doc.data(), id: doc.id}
            })
        }
        catch (err){
            error3.value = err.message
            console.log(error3.value)
        }
    }

    return { Basic, error3, load3}
}

export default getBasic

This is the profile page which I'm trying to get filled with the individuals' details depending on the profile you clicked on.

import getPBasic from "../Composables/getPBasic";


const {PBasic, error, load} = getPBasic();
load();

export default {
  name: "Slider",
    mounted(){
    
    this.PBasic = PBasic;
    this.error = error;
    this.load = load;
  },
  data() {
    return {
     error: {},
     PBasic: {},
     load: {},
     images: [
        "/src/assets/sample-1.jpg",
        "/src/assets/sample-2.jpg",
       "/src/assets/sample-3.jpg",
        "/src/assets/sample-4.jpg"
      ],
      
      currentIndex: 0
    };
  },


  methods: {
 

    next: function() {
      this.currentIndex += 1;
    },
    prev: function() {
      this.currentIndex -= 1;
    }
  },

  computed: {
    currentImg: function() {
      return this.images[Math.abs(this.currentIndex) % this.images.length];
    }
  }
};

</script>

<template>
<div v-if="error">{{ error }}</div>
<div v-if="PBasic" class="PBasic">
<br><br>
 
  <p class="text-5xl text-red-700 font-serif">{{ PBasic.name }}</p><br><br>
    <p>{{ Pbasic.age }}</p>
</template>

This is the javascript file that should get me that individual document based on the id of profile user clicked on.

import { projectFirestore } from "../Firebase/Config";
import { ref } from "vue"

const getPBasic = (id) => {
    const PBasic = ref(null)
    const error = ref(null)

    const load = async () => {
        try{
            let res = await projectFirestore.collection('Basic').doc(id).get()

            if(!res.exists) {
                throw Error('That Profile no longer exists')
            }

            PBasic.value = {...res.data(), id: res.id}
               console.log(PBasic.value)
            
        }
        catch (err){
            error.value = err.message
            console.log(error.value)
        }
    }

    return { PBasic, error, load}
}

export default getPBasic

And this is the router of the sample basic as I have it now, I'm pretty sure it's the problem I just don't know how to fix it or what to do to the other files once I've done it?

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../components/Home.vue'
import Login from '../components/Login.vue'
import Advertise from '../components/Advertise.vue'
import Samplebasic from '../components/Samplebasic.vue'


const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home,
    },
   
        {
            path: '/Login',
            name: 'Login',
            component: Login,
        },
        
        {
            path: '/Advertise',
            name: 'Advertise',
            component: Advertise,  
        }
        {
            path: '/Samplebasic',
            name: 'Samplebasic',
            component: Samplebasic,
        }
      
        
]
const router = createRouter({
    history: createWebHistory(),
    routes,
   

})

  
  export default router;
    ```
I hope I didn't go on for too long but that's the problem I'm having, and I don't know how to go about any help would be greatly appreciated, Thanks.