React中Cloud Firestore无法正确获取数据：仅返回单条文档求助

你当前代码只能获取单条数据的原因是：在forEach循环里调用setAccounts时，每次都是基于初始的空数组accounts来拼接新数据——因为React的状态更新是异步的，循环执行过程中accounts始终是初始的空数组，所以最后一次setAccounts只会保留最后一条文档的数据。

下面给你两种可行的修复方案：

方案一：一次性收集所有数据后更新状态（推荐） #

这种方法只触发一次状态更新，性能更优：

const fetchAccounts=async()=>{
  const response=db.collection('accounts');
  const data=await response.get();
  // 把所有文档数据映射成一个数组
  const accountsList = data.docs.map(item => item.data());
  // 一次性更新状态
  setAccounts(accountsList);
}

方案二：使用函数式更新 #

让每次状态更新都基于上一次的状态值，确保数据能正确累加：

const fetchAccounts=async()=>{
  const response=db.collection('accounts');
  const data=await response.get();
  data.docs.forEach(item=>{
    // 用函数式更新，prevAccounts是更新前的状态
    setAccounts(prevAccounts => [...prevAccounts, item.data()])
  })
}

额外优化 #

在渲染列表时，记得给每个元素加上唯一的key，避免React的警告：

{accounts.map((account, index) => (
  <div key={index}>
    <h1>Example</h1>
    <h4>{account.date}</h4>
    <p>{account.email}</p>
  </div>
))}

如果你的Firestore文档有唯一ID，建议把ID也一并取出作为key（更稳定）：

// 收集数据时带上文档ID
const accountsList = data.docs.map(item => ({
  ...item.data(),
  id: item.id
}));

// 渲染时用id作为key
{accounts.map(account => (
  <div key={account.id}>
    <h1>Example</h1>
    <h4>{account.date}</h4>
    <p>{account.email}</p>
  </div>
))}

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