Next.js使用<Link>加passHref仍报多子元素不支持错误如何排查

错误原因分析 #

1. 首先注意报错信息指向的是href为/posts的<Link>组件，但你贴出的代码里所有<Link>的跳转路径都是posts/${post.id}，所以问题不在你提供的这段代码中，优先排查项目其他位置所有用到<Link href="/posts">的代码。
2. 这个错误的触发条件是<Link>的直接子元素数量大于1：不管是同时放了多个标签、标签加独立文本、还是旧版本Next.js把换行/缩进识别成了多余的空白文本节点，都会触发该报错。
   错误写法示例：

   // ❌ 两个直接子元素
   <Link href="/posts">
     <span>帖子列表</span>
     <ArrowIcon />
   </Link>
   

   正确写法示例：

   // ✅ 所有内容包裹在同一个父容器内
   <Link href="/posts">
     <div>
       <span>帖子列表</span>
       <ArrowIcon />
     </div>
   </Link>
   

你贴出代码的潜在问题 #

你当前这段代码的<Link>用法也不符合不同版本Next.js的规范，也可能引发同类报错：

• 若使用Next.js 12及更早的Pages Router：<Link>的直接子元素必须是原生<a>标签，passHref仅用于子元素是封装了<a>的自定义组件的场景，原生标签不需要加该属性，正确写法如下：

  <Link href={`/posts/${post.id}`}>
    <a>
      <h2>
        {post.id} {post.title}
      </h2>
    </a>
  </Link>
  

• 若使用Next.js 13+的App Router：<Link>已经内置了<a>标签的渲染逻辑，不需要手动加<a>，也已经废弃了passHref属性，直接写即可：

  <Link href={`/posts/${post.id}`}>
    <h2>
      {post.id} {post.title}
    </h2>
  </Link>
  

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