React 从Firestore拉取数据 postList返回空数组问题

你的代码有3个核心错误，直接导致拿不到预期的数组结果：

• 状态更新逻辑完全错误：你在forEach循环中重复调用setPostList，且每次传入的是单个文档展开后的普通对象，而非向数组追加项。循环结束后postList会被覆盖为最后一条文档的对象数据，和初始定义的数组类型完全不匹配，根本不是你预期的数组结构。
• 日志打印时机不对：getPosts是异步函数，你在调用getPosts()后立刻执行console.log(postList)，此时Firestore请求还没返回、状态还未触发更新，打印出来的自然是初始的空数组。再加React本身状态更新是异步批处理机制，就算请求完成，在同步代码位置也拿不到最新的状态值。
• 渲染逻辑存在前置报错风险：组件首次渲染时postList还是初始空数组，你直接访问postList[0].Example会直接抛出「无法读取空值属性」的JS错误，组件会直接崩溃，根本等不到数据加载完成。

控制台报错截图参考：

直接替换成如下代码即可：

import React, { useEffect, useState } from 'react';
import { getDocs, collection } from 'firebase/firestore';
import { db } from '../firebase-config';


const Home = () => {
    const [postList, setPostList] = useState([]);

    useEffect(() => {
        const getPosts = async () => {
            const postsCollectionRef = collection(db, "data");
            const querySnapshot = await getDocs(postsCollectionRef);
            // 先一次性把所有文档组装成数组，不要循环内反复setState
            const posts = querySnapshot.docs.map(doc => ({
                id: doc.id, // 建议保留文档id，后续做列表增删改会用到
                ...doc.data()
            }));
            setPostList(posts);
        };
        getPosts();
    }, []);

    // 加空态判断，数据没加载完时不访问数组属性，避免报错
    return (
        <div>
            {postList.length ? postList[0].Example : "加载中..."}
        </div>
    );
};

export default Home;

核心修改点说明：

• 不要在遍历文档的循环里反复调用状态更新函数，先用map遍历快照的docs属性，把所有文档数据组装成标准数组后，单次调用setPostList完成状态更新，保证postList始终是数组类型，和初始值结构一致。
• 如果需要打印状态验证结果，不要写在和异步调用同层的同步位置，单独加一个依赖postList的useEffect监听状态变化即可，示例：useEffect(() => { console.log(postList) }, [postList])。
• 渲染时增加空值判断，数据加载完成前展示加载态，避免访问空数组下标导致组件崩溃。

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