如何解决使用Firebase Auth切换两个组件时出现的闪屏问题？

你遇到的登录页闪现问题本质是两个错误共同导致的：

• Firebase Auth 的 onAuthStateChanged 监听是异步触发的，页面初始加载时回调还没执行，你的初始状态 mycurrentUser = null 会让页面先渲染AuthPage，等回调拿到已登录的用户信息更新状态后才会切换到FeedPage，就出现了闪现效果。
• useEffect 依赖配置错误：你把 auth.currentUser 设为依赖，会导致监听器被重复注册，反而加剧状态更新的异常延迟。

1. 新增加载状态拦截渲染 #

增加一个加载状态，在Auth状态校验完成前不渲染任何业务页面，避免闪现错误页面。

2. 修正useEffect配置 #

移除错误依赖，添加监听器清理函数，避免内存泄漏。

修复后参考代码 #

function App() {
    const [mycurrentUser, setCurrentUser] = useState(null);
    // 新增加载状态，初始为true表示正在校验登录态
    const [authLoading, setAuthLoading] = useState(true);

    useEffect(() => {
        // onAuthStateChanged返回值是取消监听的函数
        const unsubscribe = onAuthStateChanged(auth, (user) => {
            if (user) {
                setCurrentUser(user);
            } else {
                setCurrentUser(null);
            }
            // 校验完成，关闭加载状态
            setAuthLoading(false);
        });
        // 组件卸载时清理监听器
        return unsubscribe;
    }, [auth]); // 依赖只需要放auth，不需要监听auth.currentUser

    return (
        <section>
            {/* 加载阶段可以自定义加载动画/空白页，避免闪现错误页面 */}
            {authLoading ? (
                <div className="loading">登录态校验中...</div>
            ) : mycurrentUser ? (
                <FeedPage/>
            ) : (
                <AuthPage/>
            )}
        </section>
    );
}

• 可以把加载态的UI做成和你应用主色调一致的骨架屏/空白页，进一步提升体验
• 如果用的是Firebase v9+，可以配合useAuthState这个封装好的Hook，内部已经处理了加载状态和监听逻辑，代码会更简洁。

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