如何解决NextJS:getStaticPaths 和 getStaticProps
我对 NextJS 非常陌生,我正在为详细信息页面尝试使用 firebase 的 getStaticPaths 和 getStaticProps。
import firebase from '../../firebase'
export const getStaticPaths = async () => {
let posts = []
const ref = firebase.firestore().collection('posts')
try {
let allPosts = await ref.get()
for (const doc of allPosts.docs) {
console.log(doc.id,'=>',doc.data())
console.log('the id is....')
let data = doc.data()
console.log(data.ytid)
posts.push({
title: data.title,ytid: data.ytid,})
}
} catch (e) {
console.log(e)
}
// Get the paths we want to pre-render based on posts
const paths = posts.map((post) => ({
params: { id: post.ytid },}))
return { paths,fallback: false }
}
export const getStaticProps = async (context) => {
const id = context.params.id
console.log('id is')
console.log(id)
let post = []
try {
const ref = firebase.firestore().collection('posts').where('ytid','==',id)
const qsnapshot = await ref.get()
qsnapshot.forEach((doc) => {
const data = doc.data()
console.log('the title is...')
console.log(data.title)
post.title = data.title
post.ytid = data.ytid
})
return {
props: { post: post },revalidate: 1,}
} catch (e) {
console.log(e)
}
}
const Details = ({ post }) => {
console.log('posting...')
console.log(post.title)
return (
<div>
<div className='mx-auto'>
<h2>Post Details Page</h2>
<h3 className='text-black'>{post.title}</h3>
<h4>Details here</h4>
</div>
</div>
)
}
export default Details
不知何故,post.title 没有显示在详细信息页面的 h3 标签中,但是当我查看控制台终端时,它被打印在那里。所以它显示在后端而不是前端。不太确定它是否是由某些配置问题引起的,任何帮助将不胜感激。
解决方法
在您的 getStaticProps
函数中,您初始化了 let post = []
(我误认为了?),即使您可以向数组(这是一个对象)添加属性,但当数组转换为 JSON。
在构建时预渲染带有 getStaticProps 的页面时,除了页面 HTML 文件之外,Next.js 还会生成一个 JSON 文件,其中包含运行 getStaticProps 的结果。 doc
将 let post = []
更改为 let post = {}
,它应该可以正常工作。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。