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

fumotvh3 于 2023-01-18 发布在其他

关注(0)|答案(1)|浏览(70)

当我使用getStaticProps从firebase firestore获取数据时，它工作得很好，但是当我尝试使用getStaticPaths实现获取每个项目细节的逻辑时，我失败了，并得到了一个404页面。这就是我的[id].js代码目前的样子。

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

我不太明白我的逻辑哪里出错了，但我会错在哪里呢？

firebase

来源：https://stackoverflow.com/questions/75142520/failing-to-fetch-dynamic-data-from-firestore-using-getstaticpaths-in-nextjs

1条答案

按热度按时间

zpqajqem1#

要为getStaticPaths函数中从数据库生成的每个路径找到正确的页面属性，您应该能够根据从每个路径获得的id字段找到每个页面信息，请参见此处：

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;

赞(0）回复(0）举报 2023-01-18

我来回答

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

1条答案

相关问题

热门标签

最新问答