React中获取Firestore引用文档后，如何正确更新组件状态？

问题根源分析 #

• 原代码中getUser是异步操作，在forEach循环里直接将未包含用户数据的document推入列表并设置状态，导致组件先渲染无用户信息的列表
• 当getUser请求完成后，直接修改document.user属性，但该对象已存在于状态列表中，直接修改对象属性不会触发React状态更新（React依赖状态的引用变化检测更新）
• 循环内多次调用setAnnouncements，造成不必要的重复渲染，且每次渲染的列表数据都不完整

修复方案：统一等待异步请求完成后更新状态 #

使用async/await结合Promise.all，等待所有关联用户数据获取完成后，一次性更新状态，确保渲染的列表包含完整数据：

import { useState, useEffect } from 'react';

export const useAnnouncements = () => {
    const [announcements, setAnnouncements] = useState([]);
    const [loading, setLoading] = useState(true); // 添加加载状态优化体验

    useEffect(() => {
        const fetchAnnouncementsWithUsers = async () => {
            try {
                // 先获取所有公告文档
                const documents = await getAnnouncements();
                
                // 为每个文档异步获取关联用户数据，用Promise.all等待全部完成
                const announcementsWithUsers = await Promise.all(
                    documents.map(async (doc) => {
                        const baseData = { id: doc.id, ...doc.data() };
                        // 获取用户文档并合并数据
                        const userDoc = await getUser(baseData.userRef);
                        return { ...baseData, user: userDoc.data() };
                    })
                );

                // 一次性更新状态，触发组件渲染完整数据
                setAnnouncements(announcementsWithUsers);
            } catch (error) {
                console.error('获取公告数据失败:', error);
            } finally {
                setLoading(false);
            }
        };

        fetchAnnouncementsWithUsers();
    }, []);

    return [announcements, loading]; // 返回加载状态供组件使用
};

关键优化点说明 #

• 异步逻辑同步化：用async/await替代回调嵌套，让代码逻辑更清晰易读
• 批量更新状态：通过Promise.all等待所有用户数据获取完成后再设置状态，避免多次无效渲染
• 不可变状态更新：每次合并数据时创建新对象（...baseData），确保状态引用发生变化，React能正确检测到更新
• 加载状态管理：添加loading状态，组件可在数据加载中显示加载提示，提升用户体验

进阶优化：缓存重复用户数据 #

如果多个公告引用同一个用户，可通过缓存避免重复请求Firestore，提升性能：

import { useState, useEffect, useRef } from 'react';

export const useAnnouncements = () => {
    const [announcements, setAnnouncements] = useState([]);
    const [loading, setLoading] = useState(true);
    const userCache = useRef({}); // 用useRef缓存已获取的用户数据

    useEffect(() => {
        const fetchAnnouncementsWithUsers = async () => {
            try {
                const documents = await getAnnouncements();
                
                const announcementsWithUsers = await Promise.all(
                    documents.map(async (doc) => {
                        const baseData = { id: doc.id, ...doc.data() };
                        const userId = baseData.userRef.id; // 获取用户ID作为缓存键

                        // 优先使用缓存数据，避免重复请求
                        if (userCache.current[userId]) {
                            return { ...baseData, user: userCache.current[userId] };
                        }

                        // 无缓存时获取用户数据并存入缓存
                        const userDoc = await getUser(baseData.userRef);
                        const userData = userDoc.data();
                        userCache.current[userId] = userData;

                        return { ...baseData, user: userData };
                    })
                );

                setAnnouncements(announcementsWithUsers);
            } catch (error) {
                console.error('获取公告数据失败:', error);
            } finally {
                setLoading(false);
            }
        };

        fetchAnnouncementsWithUsers();
    }, []);

    return [announcements, loading];
};

实时监听场景适配 #

如果需要监听Firestore集合的实时变化（文档新增/修改/删除），可替换为onSnapshot方法，并在组件卸载时取消监听：

import { useState, useEffect } from 'react';
import { db } from './your-firestore-config'; // 导入你的Firestore实例

export const useAnnouncements = () => {
    const [announcements, setAnnouncements] = useState([]);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        // 监听集合实时变化
        const unsubscribe = db.collection('announcements').onSnapshot(async (snapshot) => {
            try {
                const announcementsWithUsers = await Promise.all(
                    snapshot.docs.map(async (doc) => {
                        const baseData = { id: doc.id, ...doc.data() };
                        const userDoc = await getUser(baseData.userRef);
                        return { ...baseData, user: userDoc.data() };
                    })
                );
                setAnnouncements(announcementsWithUsers);
            } catch (error) {
                console.error('更新公告数据失败:', error);
            } finally {
                setLoading(false);
            }
        });

        // 组件卸载时取消监听，防止内存泄漏
        return () => unsubscribe();
    }, []);

    return [announcements, loading];
};

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