Next.js直接访问动态路由页报Cannot read property 'image'错误如何解决？

你之前定位的问题根源是对的，确实是筛选产品时没有拿到匹配结果，p变量为undefined导致访问属性报错，两种访问场景的差异是由Next.js路由的初始化逻辑导致的：

• 站内链接跳转：属于客户端侧路由导航，跳转时路由参数已经预先解析完成，router.query.pid有有效值，所以筛选可以正常匹配到对应产品。
• 地址栏直接访问：页面会经历首次服务端渲染+客户端hydration流程，初始渲染阶段路由实例还未完全初始化，router.query.pid为undefined，用undefined和product._id匹配自然找不到结果，就会抛出报错。

Next.js动态路由完全支持直接地址栏访问，不存在仅支持站内跳转的限制，属于缺少初始化判断和异常兜底导致的问题。

按照以下几点修改代码即可：

1. 用router.isReady判断路由是否完成初始化，未就绪时渲染加载兜底
2. 对匹配不到产品的异常场景加兜底渲染
3. 优化查询写法：用find替代filter+取下标，效率更高
4. 修正Image组件的资源路径：public目录下的资源不需要加public前缀，直接用根路径访问即可

修改后的pages/[pid].js代码如下：

import { useRouter } from 'next/router'
import Image from 'next/image'

import data from '../products.json'

export default function Template() {
  const router = useRouter()
  const { pid } = router.query

  // 路由未初始化完成时显示加载状态
  if (!router.isReady) return <div>加载中...</div>

  const p = data.find(product => product._id == pid)

  // 匹配不到对应产品时显示异常提示
  if (!p) return <div>该产品不存在</div>

  return (
    <Image 
      src={`/images/${p.image}`}
      height="500px"
      width="500px"
      alt={p.name}
    />
  )
}

内容的提问来源于stack exchange，提问作者engineer-x