Next.js中getStaticPaths无法从Firebase Firestore获取动态数据排查

你的代码存在两个核心错误，直接导致动态路由页面404和数据获取失败：

1. getStaticPaths 中的文档获取逻辑错误 #

你用getDoc()来获取集合数据，但getDoc()是专门用于获取单个文档的API，要获取集合下所有文档必须使用getDocs()。这会导致umuntu.docs属性不存在，无法生成有效的路由路径，最终触发404页面。

2. getStaticProps 中的数据获取逻辑错误 #

• 错误地用getDoc(reference)操作集合，应该先通过doc(reference, id)定位到单个文档，再用getDoc()获取其数据。
• 无意义的fetch(${data} + id)代码：data是文档快照对象，和id拼接完全不符合Firebase数据获取逻辑，应该直接从快照中提取数据。

修正后的完整代码 #

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

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

export const getStaticProps = async (context) => {
    const id = context.params.id;
    // 定位到目标文档并获取数据
    const docRef = doc(reference, id);
    const docSnap = await getDoc(docRef);
    
    if (!docSnap.exists()) {
        // 处理文档不存在的场景
        return {
            notFound: true
        }
    }

    // 提取文档中的数据
    const umuntuData = docSnap.data();
    
    return {
        props: {
            umuntu: umuntuData
        }
    }
}

export const getStaticPaths = async () => {
    // 使用getDocs获取集合下所有文档
    const querySnapshot = await getDocs(reference);
    
    const paths = querySnapshot.docs.map(doc => {
        return {
            params: { id: doc.id }
        }
    })

    return {
        paths,
        fallback: false
    }
}

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

export default Details

额外优化说明 #

• 加入docSnap.exists()判断，避免文档不存在时出现渲染错误。
• 使用umuntu?.ibizo可选链操作，防止数据未正确加载时的报错。

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