Nextjs getStaticPaths 不从 firebase firestore 获取数据

Question

I am failing to get dynamic data from firestore using getStaticPaths in nextjs. When I render the data from firestore using getStaticProps, it works, but when I open a specific item to get its details, it refuses and gives me a 404 page. This is what my code looks like for now, the [id].js page.

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

Where could I be going wrong?.

Answer 1

Your query 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
    }

}

For your static props, you will need to get specific document

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