切换用户后需刷新应用才显示对应页面的问题求助

问题原因 #

你的代码中，获取当前用户数据的useEffect依赖为空数组，仅在组件首次挂载时执行一次。当你退出user账号并以admin账号重新登录后，Home组件没有触发重新获取用户信息的逻辑，导致user状态仍然保留旧的角色数据，因此页面不会自动切换到管理员首页，必须刷新才能更新。

同时，代码未监听Firebase Auth的用户状态变化，无法感知用户登录/退出的切换动作。

解决方案 #

修改用户数据获取逻辑，通过Firebase Auth的onAuthStateChanged监听用户状态变化，确保每次用户切换时自动重新获取最新的用户角色信息：

import { auth, db } from '../../firebase';
import React, { useState, useEffect } from 'react';

const Home = ({navigation})=>{

    const [modalVisible, setModalVisible]=useState(false)
    const [formType, setFormType] = useState("")

    const [user, setUser] = useState(null) // 当前用户
    const [users, setUsers] = useState([]) // 其他用户

    useEffect(() => {
        // 监听Auth用户状态变化，登录/退出/切换账号时触发
        const unsubscribe = auth.onAuthStateChanged(currentAuthUser => {
            if (currentAuthUser) {
                // 用户已登录，获取该用户的数据库信息
                db.collection("users").doc(currentAuthUser.uid).get()
                    .then(doc => {
                        setUser(doc.data());
                    })
                    .catch(error => {
                        console.error("获取用户数据失败:", error);
                    });
            } else {
                // 用户已退出，清空user状态
                setUser(null);
            }
        });

        // 组件卸载时清理订阅，避免内存泄漏
        return unsubscribe;
    }, [])

    useEffect(() => {
        if (user)
            db.collection("users").where("role", "==", (user?.role === "admin" ? 'admin' : null))
                .onSnapshot(usersSnapshot => {
                    if (!usersSnapshot.empty) {
                        const USERS = []
                        usersSnapshot.forEach(doc => {
                            USERS.push(doc.data())
                        })
                        setUsers(USERS)
                    } else {
                        setUsers([]); // 没有数据时清空数组
                    }
                })
    }, [user])

    const handleSignOut = ()=>{
        auth
        .signOut()
        .then(()=>{
          navigation.navigate('SignIn')
        })
        .catch(error => alert(error.message))
      }

   return(
        <View>
            {user?.role === 'admin'? <AdminScreen />:<UserScreen/>}
        </View>
    )
}

关键修改点说明 #

• 用auth.onAuthStateChanged替代单次获取auth.currentUser，实时监听用户登录状态变化。
• 组件卸载时返回订阅的取消函数unsubscribe，避免内存泄漏。
• 当用户退出时，主动将user状态设为null，确保状态同步。

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