如何将Firestore数据获取为数组？仅获单个值的问题排查

你代码的核心问题是在循环内部每次push后立即调用setGas，React状态更新是异步批量处理的，循环里多次调用setGas会导致状态被反复覆盖，最终只保留最后一次循环的结果。另外，用map遍历却未利用其返回值，改用更贴合遍历场景的forEach或直接用map生成数组会更合理。

修正方案 #

先一次性收集所有文档的home字段到数组，再统一更新状态，避免多次触发组件重渲染，同时确保所有数据被正确保存：

React.useEffect(() => {
  retrieveNetwork();
}, []);

const retrieveNetwork = async () => {
  try {
    const q = query(collection(db, "cities", uidx, "adress"));
    const querySnapshot = await getDocs(q);
    
    // 用map直接生成包含所有home字段的数组
    const allHomeValues = querySnapshot.docs.map(doc => doc.data().home);
    // 一次性更新状态
    setGas(allHomeValues);
  } catch (e) {
    alert(e);
  }
};

补充说明 #

• 如果部分文档可能不存在home字段，可以添加可选链避免报错：doc.data()?.home
• 确认uidx变量有有效值，且Firestore中cities/{uidx}/adress路径下确实存在多个文档
• 若不需要返回新数组，用forEach遍历收集数据也可以，逻辑和上述一致

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