Next.js通过Link跳转报Cannot read properties of undefined (reading '0')怎么办

核心原因1：Link组件路由配置错误 #

你当前使用的Link没有匹配动态路由的参数规则：

• 你的页面通过getStaticPaths生成的所有静态路径都包含restaurantName和tableNr两个动态参数，但你在Link的query中只传递了restaurantName，缺少必填的tableNr参数
• Link的pathname写的是静态路径/restaurant/restaurantName/dashboard/，没有使用Next.js要求的动态路由标识格式

这就导致客户端路由跳转时，Next.js无法匹配到你预生成的静态页面，也无法拿到对应页面的getStaticProps返回的正确restaurantData数据，直接访问/强制刷新时路径是完整的，所以可以正常加载。

修复代码： #

<Link
  href={{
    pathname: "/restaurant/[restaurantName]/[tableNr]/dashboard",
    query: {
      restaurantName: restaurantName,
      tableNr: 对应桌号变量 // 补充你需要传递的tableNr参数
    },
  }}
>
  {/* 原有子元素内容 */}
</Link>

核心原因2：useSWR缓存key固定导致旧数据复用 #

你将useSWR的key写死为固定字符串"data"，所有餐厅的dashboard页面都会复用同一个SWR缓存数据。当你从其他页面跳转过来时，SWR会先返回之前缓存的旧数据，新的请求还在执行中，如果旧数据结构和当前页面需要的不符，即使你加了可选链也会触发报错。

修复代码： #

将SWR的key改为和当前页面参数关联的动态值，避免不同页面缓存复用：

// 可以用餐厅ID、名称等唯一标识作为SWR key的一部分
const {data, error} = useSWR(["dashboardData", props.restaurantData[0]?.queryName], fetcher);

核心原因3：getStaticProps未接收路由参数 #

你当前的getStaticProps没有获取动态路由的params参数，请求API时无法指定对应餐厅的标识，返回的数据可能和当前页面不匹配。

修复代码： #

export async function getStaticProps(context) {
  // 拿到当前路由的动态参数
  const { restaurantName, tableNr } = context.params;
  // 请求API时带入参数，获取对应餐厅的数据
  const response = await fetch(`你的API地址/${restaurantName}/${tableNr}`);
  const data = await response.json();

  return {
    props: {
      restaurantData: data,
    },
    revalidate: 1,
  };
}

可选补充：子组件非空校验 #

检查LayoutDashboard和DashboardPage两个子组件内部的属性访问逻辑，如果有直接访问嵌套属性、遍历数组的操作，也补充可选链判断或者给props设置默认值，避免父组件传值为空时触发报错。

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