Next.js中使用getStaticPaths从Firestore获取动态数据失败

代码里的关键错误： #

• getStaticPaths误用getDoc：getDoc是获取单个文档的方法，要获取集合下所有文档来生成路径，必须用getDocs。你当前用getDoc(reference)得到的不是集合文档列表，而是无效快照，导致生成的paths为空或错误，直接触发404。
• getStaticProps获取单个文档逻辑错误：await getDoc(reference) + id这种写法完全错误，正确流程是用doc(reference, id)创建对应ID的文档引用，再用getDoc获取该文档。
• 未提取文档实际数据：获取文档快照后，必须调用.data()才能拿到文档内的字段数据，否则传给组件的是快照对象，无法直接访问ibizo属性。

修正后的完整代码： #

import React from 'react'
import { db } from '@/Firebase';
import { collection, getDocs, doc, getDoc } from "firebase/firestore";

const reference = collection(db, "abantu");

export const getStaticPaths = async () => {
    // 获取集合下所有文档快照
    const snapshot = await getDocs(reference);

    const paths = snapshot.docs.map(doc => {
        return {
            params: { id: doc.id }
        }
    })

    return {
        paths,
        fallback: false
    }
}

export const getStaticProps = async (context) => {
    const id = context.params.id;
    // 创建对应ID的文档引用
    const docRef = doc(reference, id);
    // 获取单个文档快照
    const docSnapshot = await getDoc(docRef);
    
    // 处理文档不存在的情况
    if (!docSnapshot.exists()) {
        return { notFound: true }
    }

    return {
        props: {
            umuntu: docSnapshot.data()
        }
    }
}

function Details({ umuntu }) {
  return (
    <div>
        <h1>{umuntu.ibizo}</h1>
    </div>
  )
}

export default Details

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