NextJS列表已设唯一key仍告警，Firebase部署受阻求助

警告信息 #

Warning: Each child in a list should have a unique "key" prop.

Check the top-level render call using <ul>. See https://reactjs.org/link/warning-keys for more information.
    at target.default.Object.defineProperties.$$typeof.value (webpack-internal:///(rsc)/./node_modules/next/dist/build/webpack/loaders/next-flight-loader/module-proxy.js:84:27)

问题分析与解决方案 #

你提供的三个代码实例中，前两个存在核心问题：key被错误添加在<li>标签上，而非<ul>的直接子元素上。React要求列表的直接子元素必须拥有唯一key——因为React的diff算法是基于父节点的子元素做比对的，内层元素的key不会被识别为列表项的标识。

实例1修复 #

原代码里，<ul>的直接子元素是<Link>标签（包括单独的首页链接和map生成的链接），但你把key加在了<Link>内部的<li>上，React无法识别这个key。需要将key移到<Link>标签上：

const MENU_LIST = [
  { text: "Stay Updated", href: "#stayupdated"},
  { text: "About Us", href: "#about"}
]

...

<ul className={styles.nav}>
  <Link href="/" key='home'>
     <li className={styles.logo}>Company</li>
  </Link>
  {MENU_LIST.map((item) => (
    <Link href={item.href} key={item.text}>
      <li className={styles.links}>{item.text}</li>
    </Link>
  ))}
</ul>

实例2修复 #

同理，map生成的<Link>是<ul>的直接子元素，key需要加在<Link>上，而非内部的<li>：

const MENU_LIST = [
    { text: "About Us", href: "#about" },
    { text: "Stay Updated", href: "#stayupdated" },
    { text: "↑ Go Back to the Top of the Page", href: "/" }
]

...

<ul className={styles.nav}>
  {MENU_LIST.map((item) => (
    <Link href={item.href} key={item.href}>
      <li className={styles.links}>{item.text}</li>
    </Link>
  ))}
</ul>

实例3验证 #

第三个代码实例是正确的：<ul>的直接子元素是<li>，且每个<li>都有唯一key，这部分不会触发警告。

额外检查 #

如果修复后警告仍存在，请排查项目中是否还有其他未注意到的列表渲染：

• 所有使用map生成的元素集合（包括<div>、<section>等组成的“隐形列表”）
• 嵌套在组件内部的<ul>/<ol>列表
• 动态渲染的条件列表（比如通过&&或三元表达式渲染的多个元素）

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