Nextjs getStaticPaths 不从 firebase firestore 获取数据

Question

我无法在 nextjs 中使用 getStaticPaths 从 firestore 获取动态数据。 当我使用 getStaticProps 从 firestore 渲染数据时，它可以工作，但是当我打开特定项目以获取其详细信息时，它拒绝并给我一个 404 页面。 这就是我的代码现在的样子，[id].js 页面。

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

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


export const getStaticProps = async (context) => {
    const id = context.params.id;
    const data = await getDoc(reference);
    const umuntuData = fetch(`${data}` + id);
    
    return {
        props: {
            umuntu: umuntuData
        }
    }
}

export const getStaticPaths= async () => {
    const umuntu = await getDoc(reference);
    // const umuntuData = umuntu.docs

    const paths = umuntu.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

我哪里会出错？

Answer 1

您的查询 getDoc(specific doc) vs getDocs(list of docs)

export const getStaticPaths= async () => {
    const umuntu = await getDocs(reference);
    // const umuntuData = umuntu.docs

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

    return {
        paths,
        fallback: false
    }

}

对于您的 static 道具，您需要获得特定文件

//import {doc} from "firebase/firestore";
export const getStaticProps = async (context) => {
    const id = context.params.id;
    const docRef = doc(db, "abantu", id);
    const data = await getDoc(docRef);
    const umuntuData = fetch(`${data}` + id);
    
    return {
        props: {
            umuntu: umuntuData
        }
    }
}