React+Firebase使用useCollectionData渲染列表key不生效报错

你在ChatRoom组件的map渲染层已经正确配置了key={msg.id}，警告仍然触发，只有两类成因：

• 警告来源不是当前这层列表，是ChatMessage组件内部的其他数组渲染逻辑
  React会校验所有组件层级的列表渲染，只要任意一层.map()返回的元素没配置合法key，就会抛出这个警告，和你外层给ChatMessage组件传的key没有关系。你可以直接看控制台警告的调用栈，会明确标注缺失key的列表所在的文件和行号，绝大多数情况都是ChatMessage组件内部写了列表渲染（比如表情列表、消息附的图片列表、已读成员列表这类），忘了给对应项加key。
• 传入的msg.id存在非法值
  如果你本地Firestore有脏缓存、或者实时订阅首次拉取时混入了未完整写入的临时文档，会出现部分消息的id为undefined/null的情况，这种情况下React会判定你没有传入有效key。可以先加一行日志校验数据：

  console.log('消息id列表', messages?.map(m => m.id))
  

  如果输出里存在undefined、null或者重复id，加个过滤逻辑即可：

  {messages?.filter(msg => !!msg.id).map(msg => <ChatMessage key={msg.id} message={msg} />)}
  

1分钟快速定位方法 #

临时把外层渲染的ChatMessage替换成普通原生DOM节点测试：

{messages && messages.map(msg => <div key={msg.id}>{msg.text/* 换成你消息里存文本的字段名 */}</div>)}

• 如果替换后警告消失：问题100%出在ChatMessage组件内部，逐行查组件里的数组渲染代码补key即可
• 如果替换后警告仍然存在：检查messages数组里的id合法性，过滤掉id无效的项就能解决

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