Kot*_*ren 5 javascript next.js
我一直在尝试构建这个博客应用程序，之前很好，在开发环境中也很好。但是，当我尝试构建它进行生产时，它就陷入了这个错误。
预呈现页面“/blogs/[slug]”时发生错误。阅读更多： https: //nextjs.org/docs/messages/prerender-error TypeError：无法读取未定义的属性“标题”
我很困惑，因为这个应用程序之前已经构建过，没有任何问题。这就是罪魁祸首：
import Head from "next/head";
import "bootstrap/dist/css/bootstrap.min.css";
import ReactMarkdown from "react-markdown";
import moment from "moment";
const Post = ({ posts }) => {
return (
<>
<Head>
<title>{posts && posts.title}</title>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
></meta>
</Head>
<div className="container" style={{ marginTop: "3.85rem" }}>
<div className="row">
<h1>{posts.title}</h1>
</div>
<div className="row d-flex justify-content-end">
<p style={{ textAlign: "right" }}>
{moment(posts.dateTime).format("dddd, Do MMMM YYYY, hh:mm:ss a")}
</p>
</div>
<br />
<div className="row d-flex justify-content-center">
<img
className="postThumbNail"
src={posts.thumbnail.url}
alt={posts.thumbnail.url}
/>
</div>
<br />
<ReactMarkdown>{posts.body}</ReactMarkdown>
</div>
</>
);
};
export async function getStaticProps({ params: { slug } }) {
const res = await fetch(
`https://someapi.com/blogs?slug=${slug}`
);
const blogPost = await res.json();
return {
props: {
posts: blogPost[0],
},
revalidate: 600,
};
}
export async function getStaticPaths() {
// Get Post From Strapi
const res = await fetch(
"https://someapi.com/blogs"
);
const post = await res.json();
// Retrun Enrich Content
return {
paths: post.map((posts) => ({
params: { slug: String(posts.slug) },
})),
fallback: true,
};
}
export default Post;
解决方案 1 您需要首先使用可选链接检查属性是否存在：
<h1>{posts?.title}</h1>
解决方案 2return null或在数据加载之前
对象不为空
if(!posts) return null
return <div> ...Code </div>