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

我哪里做错了？