Next.js中Each child in a list should have a unique 'key' prop警告求助

排查方向与解决方案 #

1. 确认category.id的唯一性 #

警告的核心原因是列表项的key不唯一。先检查你的navLinks数据中，category.id是否存在重复值：

• 在map回调里添加日志打印验证：

  navLinks.slice(0, 4).map((category: Category, index) => {
    console.log(`ID: ${category.id}, Index: ${index}`)
    // ... 原有组件代码
  })
  

  若发现重复ID，改用其他唯一标识：
  • 若category.name全局唯一，使用key={category.name}
  • 临时排查方案：结合index确保唯一性（不推荐作为长期方案）：

    key={`${category.id}-${index}`}
    

2. 移除子元素Link上的冗余key #

key属性仅需要添加到map返回的最外层元素（即NavigationMenuItem），子元素Link不需要设置key，冗余的key会导致React识别逻辑混乱。修改后的代码片段：

{navLinks != null
  ? navLinks.slice(0, 4).map((category: Category) => (
      <NavigationMenuItem
        className=" text-[18px]"
        key={category.id}
      >
        <Link href={`/shop/${category.name}`}>
          {category.name}
        </Link>
      </NavigationMenuItem>
    ))
  : null}

3. 检查NavigationMenuItem组件内部的列表渲染 #

如果前两步无效，说明问题可能出在NavigationMenuItem组件内部：

• 打开该组件源码，检查是否存在循环渲染（比如map）但未添加key的情况，给内部的列表项补充唯一key即可。

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