切换Firebase登录用户后界面未更新，需刷新才显示的问题求助

核心问题 #

• 查询对象未随用户更新：message变量在组件初始化时创建，依赖auth.currentUser.email。当用户切换后，auth.currentUser变化，但这个变量不会重新计算，导致始终查询第一个用户的数据。
• 订阅逻辑未正确响应用户切换：onAuthStateChanged回调中复用了初始的message查询对象，用户切换后没有重新构建查询，自然拿不到新用户的数据。

修复后的代码 #

const UserInbox = () => {
    const [userData, setUserData] = useState([]);

    {/* 仅获取当前登录用户的消息 */}
    const fetchData = () => {
        const unsubscribe = auth.onAuthStateChanged(async (user) => {
            const list = [];
            if (user) {
                // 每次用户状态变化时，重新构建查询对象
                const messageQuery = db.collection('feedback').where('recipient', '==', user.email);
                await messageQuery
                    .get()
                    .then((querySnapshot) => {
                        querySnapshot.forEach((doc) => {
                            const { userId, recipient, messageText } = doc.data();
                            list.push({
                                id: doc.id,
                                userId,
                                recipient,
                                messageText
                            });
                        });
                        setUserData(list);
                    });
            } else {
                setUserData(null);
            }
        });
        return () => unsubscribe(); 
    };

    // 组件挂载时启动用户状态监听，确保切换用户时自动重新查询
    useEffect(() => {
        const unsubscribe = fetchData();
        return unsubscribe;
    }, []);

    // 此处添加界面渲染逻辑
};

关键改动说明 #

• 将查询对象移至用户状态回调内：每次onAuthStateChanged触发（用户登录/切换/退出）时，都基于当前user.email重新构建查询，确保查询的是当前用户的数据。
• 用useEffect管理订阅生命周期：组件挂载时启动监听，卸载时清理订阅，避免内存泄漏。
• 直接使用回调传入的user参数：不再依赖组件初始化时的auth.currentUser，确保数据与当前登录用户同步。

额外优化建议 #

• 添加加载状态，在数据查询过程中显示加载提示，提升用户体验。
• 为查询添加.catch()捕获异常，避免静默失败导致的界面异常。

内容的提问来源于stack exchange，提问作者Bashamlan Salem