Next.js Link组件href属性未定义错误排查求助

• 先确认Layout组件中Link的href绑定值
  检查你传给href的变量是否真的有值：比如是不是从props接收但父组件没传，或者变量名拼错了。如果是动态路由（比如href={/posts/${postId}}），要确保postId不是undefined，实在不行可以加兜底，比如href={/posts/${postId || '404'}}，或者先判断变量存在再渲染Link。

• 核对Link组件的导入和用法（注意Next.js版本差异）
  Next.js 13+的App Router里，Link从next/link导入，直接写<Link href="/path">文本</Link>就行，不用套a标签；Pages Router里虽然要套a标签，但href的要求是一样的。别混用不同版本的写法，避免无效的href类型。

• 顺藤摸瓜查组件树的props传递
  从根组件到Layout的props链路里，有没有哪个环节漏传了路由路径变量？可以在Layout里用console.log打印href对应的变量值，直接看是不是undefined，快速定位问题出在哪一层。

• 加个兜底防出错
  要么给Link加条件渲染，只有href有效时才渲染：

  {navHref && <Link href={navHref}>导航项</Link>}
  

  要么给href设个默认值，比如href={navHref || '/'}。

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