Next.js使用<Link>组件遍历菜单数组报错：多子元素不被支持

问题原因 #

Next.js的<Link>组件仅支持一个直接子元素，你当前代码里在Link内部直接放了图标组件和文本两个同级子节点，违反了这个限制，因此触发报错。

解决方案 #

用一个容器元素（比如<div>）把图标和文本包裹起来，让Link只拥有一个直接子元素，同时保留原有的样式和遍历逻辑，无需硬编码菜单项。

修改后的代码 #

{navigation.map((item) => (
  <Link
    key={item.name}
    href={item.href}
  >
    <div className={classNames(
      router.pathname === item.href
        ? 'bg-indigo-800 text-white'
        : 'text-indigo-100 hover:bg-indigo-600',
      'group flex items-center rounded-md px-2 py-2 text-base font-medium'
    )}>
      <item.icon
        className="mr-3 h-6 w-6 flex-shrink-0 text-indigo-300"
        aria-hidden="true"
      />
      {item.name}
    </div>
  </Link>
))}

说明 #

• 原导航数组的遍历逻辑完全保留，依然能动态生成菜单
• 把原本放在Link上的布局样式移到内部<div>中，菜单的视觉效果和交互行为不受影响
• 容器元素也可以用<span>，只要是能包裹子节点的块级/行内块级元素都可行

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