我试图从firebase firestore使用getStaticPaths和getStaticProps获取页面详细信息，但我得到一个空页面，没有错误。我不明白这是怎么回事。这就是我的代码目前的样子
import React from 'react'
import { useRouter } from 'next/router'
import { collection, doc, getDoc, getDocs } from "firebase/firestore";
import { db } from '@/firebase';
export const getStaticPaths = async () => {
const reference = await getDocs(collection(db, 'blogs'));
const paths = reference.docs.map(blog => {
return {
params: {id: blog.id}
}
})
return {
paths,
fallback: false
}
}
export const getStaticProps = async (context) => {
const id = context.params.id;
const response = doc(db, "blogs", id);
const res = JSON.parse(JSON.stringify(response))
const blogs = [];
blogs.push(res)
return {
props: {
data: blogs
}
}
}
function Details({data}) {
const router = useRouter();
return (
<div>
{data.map(blog => {
<div className="j">
console.log(blog.title)
<h1>{blog.description}</h1>
</div>
})}
<button onClick={() => router.push('/tryout')}>Back</button>
</div>
)
}
export default Details我能做错什么呢？
1条答案
按热度按时间yrwegjxp1#
getStaticProps响应格式：
在getStaticProps函数中，您创建了一个不正确的响应格式。doc（）函数的响应不是JSON可直接解析的。您应该使用getDoc（）函数从Firestore获取文档数据。
Map内部详图构件：
在Details组件中，您尝试直接Map数据，但它不是一个数组，假设getStaticProps只根据ID获取一个文档。删除map功能。
通过这些更改，您的代码应该可以按预期工作。只需确保您的Firestore结构与您试图在Details组件中访问的字段匹配**（data.title，data.description）**。如果您仍然遇到问题，请检查Firestore数据结构和您试图访问的值，以确保它们与预期的格式匹配。此外，请确保您的Firebase配置（db）设置正确。