React警告：列表子元素需唯一key属性，key值未定义问题排查

问题原因 #

你遇到的警告核心是从Firestore获取的数据中不存在item.id字段。在代码中，snap.docs.map((doc) => doc.data())仅提取了文档的内容数据，但Firestore文档的唯一ID存储在doc.id属性中，而非doc.data()返回的对象里，因此item.id实际为undefined，React会判定你未提供有效key值，从而抛出警告。

修复方案 #

提供两种可行的修复方式，按需选择：

方式1：将文档ID合并到数据对象中

修改useEffect里的数据映射逻辑，把Firestore文档ID添加到每个数据项中：

useEffect(() => {
  if (viewData && viewData.id) {
    const viewRef = collection(doc(db, "Announcements", "Classes"), viewData.id);
    const unsubscribe = onSnapshot(viewRef, (snap) => {
      // 将doc.id合并到数据对象
      setAnnouncement(snap.docs.map((doc) => ({
        ...doc.data(),
        id: doc.id
      })));
    });
    return () => unsubscribe()
  }
}, [viewData])

修改后，key={item.id}就能获取到有效的唯一ID，警告会自动消失。

方式2：直接使用文档ID作为key（无需修改数据结构）

如果不想调整数据结构，可以直接存储整个Firestore文档对象，渲染时用doc.id作为key：

// 修改useEffect中的数据存储逻辑
useEffect(() => {
  if (viewData && viewData.id) {
    const viewRef = collection(doc(db, "Announcements", "Classes"), viewData.id);
    const unsubscribe = onSnapshot(viewRef, (snap) => {
      setAnnouncement(snap.docs); // 直接存储文档对象数组
    });
    return () => unsubscribe()
  }
}, [viewData])

// 修改渲染部分的代码
return (
  <div>
    {announcement.map((doc) => (
      <div className="View" key={doc.id}>
        <div className="View_Cnt">
          <div className="View_Top">
            <Avatar />
            <div>{doc.data().sender}</div>
          </div>
          <p className="View_Test">{doc.data().text}</p>
          <img className="View_Img" src={doc.data().imageUrl} alt={doc.data().text} />
        </div>
      </div>
    ))}
  </div>
)

注意事项 #

Firestore的文档ID在同一集合内是唯一的，完全符合React对列表key的唯一性要求，无需额外生成其他唯一标识。

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