Next.js报错：Cannot read properties of undefined (reading 'title') 求助

这个错误的核心是**post变量为undefined时，你尝试访问它的title属性**，触发了无法读取未定义属性的报错。导致post为undefined的常见场景有两个：

1. Next.js 初始渲染时路由query未就绪：在客户端路由初始化完成前，router.query.id是undefined，parseInt(id)会得到NaN，用NaN去匹配blogdata里的post.id（数字类型），find方法找不到匹配项，返回undefined。
2. blogdata中无对应ID的条目：如果URL中的id在blogdata里不存在，find同样会返回undefined。

1. 处理路由query未就绪的情况 #

在组件中增加对post存在性的判断，避免在未获取到数据时渲染依赖post的内容：

const SinglePost = () => {
  const router = useRouter()
  const { id } = router.query
  // 先判断id是否存在再执行find
  const post = id ? blogdata.find((post) => post.id === parseInt(id)) : null

  // 未获取到post时显示加载态或提示
  if (!post) {
    return <div>加载中...</div>
  }

  return (
    <>
      <Head>
        <title>{post.title}</title>
      </Head>
      <section className='post-details bg-top'>
        <div className='container'>
          <div className='heading-title'>
            <TitleSm title='TIPS &amp; TRICKS / JANUARY 12, 2022' /> <br />
            <br />
            <Title title={post.title} className='title-bg' />
            <div className='img py'>
              <img src={post.cover} alt={post.title} width='100%' height='100%' className='round' />
            </div>
          </div>
        </div>
      </section>
    </>
  )
}

2. 使用可选链操作符快速规避报错 #

如果不想写完整的条件判断，可以用可选链?.来安全访问属性，同时给属性设置默认值，避免报错：

<Head>
  <title>{post?.title || '默认标题'}</title>
</Head>
<Title title={post?.title || ''} className='title-bg' />
<img src={post?.cover || ''} alt={post?.title || '文章封面'} width='100%' height='100%' className='round' />

3. 验证blogdata的ID匹配逻辑 #

检查blogdata中的id类型是否和parseInt(id)匹配：

• 如果blogdata里的id是字符串类型，直接用post.id === id匹配，不要用parseInt转换。
• 确认URL中的id在blogdata里有对应的条目，避免因ID不存在导致post为undefined。

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