Vue+Firebase无法通过ID获取单个文档，路由问题求助

核心问题分析 #

当前详情页显示“找不到该档案”，根源是路由未配置动态ID参数，且页面间未传递文档ID，导致请求Firebase时无有效ID参数。

步骤1：修改路由配置，添加动态ID参数 #

为Samplebasic路由添加:id参数，允许接收文档ID：

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,  
    },
    {
        // 新增动态参数:id
        path: '/Samplebasic/:id',
        name: 'Samplebasic',
        component: Samplebasic,
    }
]

const router = createRouter({
    history: createWebHistory(),
    routes,
})

export default router;

步骤2：修改首页路由跳转，传递文档ID #

在首页v-for循环中，通过router-link将当前文档ID传递给详情页：

<template>
  <div v-for="Basics in Basic" :key="Basics.id">
    <!-- 使用命名路由传递ID，避免硬编码路径 -->
    <router-link :to="{ name: 'Samplebasic', params: { id: Basics.id } }">
      <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>

<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>

步骤3：修改详情页，接收路由参数并请求数据 #

在详情页中获取路由传递的ID，传入getPBasic请求对应文档：

<script>
import getPBasic from "../Composables/getPBasic";
import { useRoute } from 'vue-router';

export default {
  name: "Slider",
  setup() {
    const route = useRoute();
    const docId = route.params.id;
    // 传入ID调用数据请求函数
    const {PBasic, error, load} = getPBasic(docId);
    load();

    return { PBasic, error };
  },
  data() {
    return {
      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" class="text-red-500">{{ error }}</div>
  <!-- 确保数据加载完成后再渲染 -->
  <div v-if="PBasic && PBasic.id" class="PBasic">
    <br><br>
    <p class="text-5xl text-red-700 font-serif">{{ PBasic.name }}</p><br><br>
    <!-- 修正变量名大小写，与数据库字段保持一致 -->
    <p>{{ PBasic.Age }}</p>
  </div>
</template>

细节修正 #

1. 详情页模板中{{ Pbasic.age }}改为{{ PBasic.Age }}，与列表页的字段大小写保持一致
2. 确保getPBasic函数调用时传入了正确的ID参数

验证效果 #

1. 点击首页档案卡片，路由会跳转至/Samplebasic/文档ID格式的地址
2. 详情页会自动请求对应ID的Firebase文档数据
3. 控制台将打印获取到的文档数据，页面正常展示档案信息

内容的提问来源于stack exchange，提问作者Epimetheus14