Firestore集合数据获取异常：仅获取单条文档而非全部数据求助

问题出在你每次遍历文档时都直接用setUserData覆盖了之前的状态，而不是把所有文档数据收集到数组中再统一更新。控制台能打印所有数据是因为你在循环里逐个输出，但状态每次都被最后一条数据替换了。

修改步骤： #

• 把状态的初始值改为空数组（匹配多条数据的存储结构）
• 遍历文档时，先把所有数据收集到一个临时数组里
• 遍历完成后，一次性把整个数组传入setUserData

修正后的代码示例： #

// 初始化状态为数组
const [userData, setUserData] = useState([]);

// 获取全量数据
db.collection('Charities').get().then((querySnapshot) => {
  const charitiesList = [];
  querySnapshot.forEach((doc) => {
    // 可选：把文档ID也存进去，方便后续操作（比如编辑/删除）
    charitiesList.push({ ...doc.data(), id: doc.id });
    console.log(doc.data()); // 正常打印单条数据
  });
  // 遍历完成后统一更新状态
  setUserData(charitiesList);
});

如果习惯用async/await写法，也可以这样写：

const [userData, setUserData] = useState([]);

useEffect(() => {
  const fetchAllCharities = async () => {
    const querySnapshot = await db.collection('Charities').get();
    // 用map直接转换为数组，写法更简洁
    const charitiesList = querySnapshot.docs.map(doc => ({
      ...doc.data(),
      id: doc.id
    }));
    setUserData(charitiesList);
  };

  fetchAllCharities();
}, []);

这样修改后，userData就会存储Charities集合里的所有文档数据，渲染的时候可以通过遍历数组来展示每一条内容。

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