调用getDocs获取数据后，setPosts为何仍输出空数组？

核心问题：React状态更新的异步特性 #

你遇到的问题根源是React的状态更新是异步操作——调用setPosts后，posts并不会立刻更新为新值，所以你紧接着的console.log(posts)打印的始终是更新前的旧状态（也就是初始的空数组）。

另外还有个隐藏坑：你在forEach循环里每次用[...posts, event.data()]更新状态，由于异步特性，每次更新时posts都是初始的空数组，最终你的posts数组只会保留最后一条Firestore返回的数据。

解决方法 #

方法1：使用函数式更新状态

React允许给setState传入一个函数，这个函数会接收当前最新的状态值，基于它生成新状态，彻底避免闭包捕获旧值的问题：

useEffect(() => {
  getDocs(postsRef)
    .then((querySnapshot) => {
      querySnapshot.docs.forEach((doc) => {
        console.log(doc.data());
        // 基于最新的prevPosts生成新数组
        setPosts(prevPosts => [...prevPosts, doc.data()]);
      });
    })
    .catch((err) => console.log(err));
}, []);

// 要查看更新后的posts，通过监听状态变化实现
useEffect(() => {
  console.log("更新后的posts:", posts);
}, [posts]);

方法2：一次性收集所有数据再更新（更高效）

避免多次调用setPosts触发组件重复渲染，先把所有Firestore数据收集到临时数组，再一次性更新状态：

useEffect(() => {
  getDocs(postsRef)
    .then((querySnapshot) => {
      // 一次性转换所有文档数据为数组
      const newPosts = querySnapshot.docs.map(doc => doc.data());
      console.log(newPosts); // 这里可以直接打印完整的新数据
      setPosts(newPosts);
    })
    .catch((err) => console.log(err));
}, []);

// 监听posts变化，打印最新状态
useEffect(() => {
  console.log("更新后的posts:", posts);
}, [posts]);

关于console.log的说明 #

如果想确认状态是否更新成功，不要在setPosts后立刻打印——因为异步特性，此时posts还是旧值。正确的做法是：

• 通过useEffect监听posts的变化，状态更新后自动触发打印
• 在组件的JSX中直接渲染posts内容，从页面上直观验证结果

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