Next.js <Link>未传入多个子元素却报仅支持单个子元素错误原因查询

这个是Link组件（多见于Next.js框架的路由组件）的约束报错，要求Link的直接子元素只能有1个，你触发报错的核心原因有两个：

1. JSX语法中，标签之间的换行、空格会被识别为独立的文本节点，也算作子元素。你的代码中<Link>标签和内部的<a>标签之间存在换行空格，相当于直接给Link传入了「空白文本节点 + 标签」两个直接子元素。
2. 如果你使用的是Next.js 13及以上版本，该版本的Link组件已经内置了<a>标签的渲染能力，不需要手动嵌套<a>标签，额外嵌套的标签逻辑也可能触发子元素数量校验异常。

根据你使用的Next.js版本选择对应方案即可：

• 若使用Next.js 13+版本：直接删除手动嵌套的<a>标签，保留Link直接包裹<PostPublic>组件即可，修改后代码如下：

{posts.map((post) => (
  <div key={post._id} className="col-md-4">
    <Link href={`/post/view/${post._id}`}>
      <PostPublic key={post._id} post={post} />
    </Link>
  </div>
))}

• 若使用Next.js 12及更早版本：去除Link和<a>标签之间的换行空格，保证Link的直接子元素只有1个<a>标签即可，修改后代码如下：

{posts.map((post) => (
  <div key={post._id} className="col-md-4">
    <Link href={`/post/view/${post._id}`}><a>
      <PostPublic key={post._id} post={post} />
    </a></Link>
  </div>
))}

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