无法使用 nextjs 中的 getStaticPaths 从 firestore 获取动态数据

Question

When I fetch data from firebase firestore using getStaticProps, it works perfectly but when I try implementing the logic of getting the details of each single item using getStaticPaths, I fail and get a 404 page. This is how my [id].js code looks like currently.

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

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

export const getStaticPaths= async () => {
    const umuntu = await getDoc(reference);

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

    return {
        paths,
        fallback: false
    }

}

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

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

export default Details

I dont quite get where my logic is going wrong but where could I be going wrong?.

Answer 1

For finding the right page props for each of the paths that you generate from the database in the getStaticPaths function, you should be able to find each of the pages information based on the id field you are getting from each path, see it here:

export const getStaticProps = async (context) => {
  const id = context.params.id;
  const umuntu = await getDoc(reference);
  const data = umuntu.docs.find((pageData) => pageData.id === id); // this will find the right page based on the id passed via page path

  return {
    props: {
      data
    },
  };
};

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

export default Details;