Firestore集合检索文档时出现‘Encountered two children with same key’错误

我的Firestore集合结构如下：

Messages (collection)
  - ADasjewj123asdej-SAasdadfsd1234 (document) // 格式为 一个uid + '-' + 另一个uid
    - chat (collection)
      - 多个文档...

我尝试用以下代码检索Messages下的所有文档：

async getAllData(){
    let data = await firestore()
      .collection('Messages')
      .get()
    return data.docs.flat().map(doc => ({
      value: Object.values(doc.data()),
      key: doc.id  
    }))
  }

但执行时触发了Encountered two children with same key错误，尝试Firestore文档中的多种方法仍未解决，请问是否是自定义标识符导致的？

自定义文档ID不是问题根源——Firestore同一集合下的文档ID是全局唯一的，用doc.id作为key本身不会引发重复问题。

问题出在你的数据返回结构和后续渲染逻辑的不匹配上：

• 你当前返回的数组中，每个元素的value是Object.values(doc.data())（即文档所有字段值组成的数组），而key绑定的是文档ID。
• 如果后续渲染时，你遍历这个value数组并将外层的doc.id作为子元素的key，就会出现多个子元素共用同一个key的情况，触发错误。
• 另外，代码里的flat()完全多余，data.docs本身就是一维的文档对象数组，调用它不会改变数组结构。

修复方案 #

1. 如果要渲染完整文档数据：直接返回文档ID和完整数据，不需要提取values：

async getAllData(){
    let data = await firestore()
      .collection('Messages')
      .get()
    return data.docs.map(doc => ({
      value: doc.data(),
      key: doc.id  
    }))
  }

2. 如果确实需要渲染values数组：在渲染子元素时，结合文档ID和索引生成唯一key：

// 示例渲染代码
{data.map(item => (
  <div key={item.key}>
    {item.value.map((val, index) => (
      <span key={`${item.key}-${index}`}>{val}</span>
    ))}
  </div>
))}

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