Next.js TypeError问题：无法读取undefined的'title'属性

核心问题 #

组件初始化阶段，router.query.slug可能还未被Next.js路由系统填充，此时proDetail[slug]会返回undefined，直接访问.title就会触发Cannot read properties of undefined错误。

具体解决方案 #

下面提供几种无需单独创建页面的解决方式，按需选择即可：

1. 条件渲染判断有效性

在渲染标题前先校验slug是否存在，且对应的数据在proDetail中有效：

import { useRouter } from 'next/router';

export default function ProductDetail({ proDetail }) {
  const router = useRouter();
  const { slug } = router.query;

  // 校验slug及对应数据的有效性
  if (!slug || !proDetail[slug]) {
    return <div>加载中...或页面不存在</div>;
  }

  return <h1>{proDetail[slug].title}</h1>;
}

2. 使用可选链操作符简化安全访问

利用ES6的可选链?.直接处理可能的undefined，避免报错：

import { useRouter } from 'next/router';

export default function ProductDetail({ proDetail }) {
  const router = useRouter();
  const { slug } = router.query;

  // 可选链会在slug不存在或proDetail[slug]不存在时返回undefined，不会抛出错误
  const title = proDetail?.[slug]?.title || '加载中...';

  return <h1>{title}</h1>;
}

3. 结合路由isReady状态精确控制加载

通过router.isReady判断路由是否完成初始化，确保router.query参数已被正确填充：

import { useRouter } from 'next/router';

export default function ProductDetail({ proDetail }) {
  const router = useRouter();
  const { slug } = router.query;

  // 路由未准备好时显示加载状态
  if (!router.isReady) {
    return <div>加载中...</div>;
  }

  // 路由就绪后校验数据是否存在
  if (!proDetail[slug]) {
    return <div>该产品不存在</div>;
  }

  return <h1>{proDetail[slug].title}</h1>;
}

内容的提问来源于stack exchange，提问作者B M PAVAN