NextJS生产构建预渲染页面报Cannot read property 'title' of undefined

故障原因 #

• 你在getStaticPaths中配置了fallback: true，该配置的作用是：当用户请求的路径不在预渲染路径列表中时，Next.js不会直接返回404，会先返回一个临时的fallback页面，同时在后台执行getStaticProps生成对应静态页。此时首次渲染页面时posts参数为undefined，但你仅在title标签处做了非空判断，页面其他位置直接访问posts.title、posts.dateTime等属性就会触发报错。
• 存在接口返回空数据的风险：如果请求的slug没有匹配到对应文章，接口会返回空数组，blogPost[0]取值为undefined，同样会导致posts参数为空触发报错。

解决方案 #

1. 新增fallback状态与空值判断 #

修改组件代码，增加加载状态和空值兜底逻辑：

import { useRouter } from 'next/router'
import Head from "next/head";
import "bootstrap/dist/css/bootstrap.min.css";
import ReactMarkdown from "react-markdown";
import moment from "moment";

const Post = ({ posts }) => {
  const router = useRouter()
  // 处理fallback加载状态
  if (router.isFallback) {
    return <div className="container mt-5">文章加载中...</div>
  }
  // 空值兜底，文章不存在时提示
  if (!posts) {
    return <div className="container mt-5">该文章不存在或已被删除</div>
  }

  return (
    <>
      <Head>
        <title>{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>
    </>
  );
};

2. 优化getStaticProps异常处理 #

在服务端数据获取逻辑中增加空数据判断，未匹配到文章直接返回404：

export async function getStaticProps({ params: { slug } }) {
  const res = await fetch(
    `https://someapi.com/blogs?slug=${slug}`
  );
  const blogPost = await res.json();

  // 无匹配文章时返回404
  if (!blogPost || blogPost.length === 0) {
    return {
      notFound: true
    }
  }

  return {
    props: {
      posts: blogPost[0],
    },
    revalidate: 600,
  };
}

可选调整：关闭fallback功能 #

如果你所有文章都需要在构建时预渲染，不需要动态生成新增文章的静态页，可以直接把getStaticPaths中的fallback: true改为fallback: false，访问未预渲染的路径时会直接返回404，也不会触发fallback状态下的渲染报错。

内容的提问来源于stack exchange，提问作者KotjengOren