React Native+Firebase中onAuthStateChanged未触发致页面不重绘问题

嘿，我帮你梳理下为什么onAuthStateChanged没触发App.js重绘，以及怎么修复这个问题：

核心问题拆解 #

1. Firestore写入与Auth状态变更的时序冲突 #

当你调用createUserWithEmailAndPassword成功后，Firebase Auth会立刻触发onAuthStateChanged回调，但此时你往Firestore写入用户数据的异步操作可能还没完成。这时候执行usersRef.doc(user.uid).get()会拿到一个不存在的文档，document.data()返回undefined，导致setUser(userData)把user状态设为undefined——App.js里的{user ? ... : ...}条件判断依然走else分支，自然不会切换到Home页面。

2. 手动导航的逻辑矛盾 #

你在注册成功后手动调用navigation.navigate('Home')，但此时App.js的导航栈里根本没有Home屏幕（因为user还是null，栈里只渲染了Login和Registration），这不仅会导致导航失败，也违背了你通过Auth状态自动控制页面渲染的初衷。

具体修复方案 #

方案一：优化Auth状态监听，兼容Firestore文档未就绪的情况 #

修改App.js里的useEffect逻辑，确保即使Firestore文档还没写入，也能先基于Auth用户的基础信息更新状态，保证页面能正常切换：

useEffect(() => {
  console.log('hello from home screen');
  const usersRef = firestore().collection('users');
  // 保存订阅引用，用于组件卸载时清理
  const unsubscribe = auth().onAuthStateChanged(async user => {
    if (user) {
      try {
        const document = await usersRef.doc(user.uid).get();
        const userData = document.data();
        // 如果文档不存在，用Auth返回的用户基础数据兜底
        setUser(userData || { id: user.uid, email: user.email });
      } catch (error) {
        console.error('获取用户数据失败:', error);
        // 即使获取失败，也设置基础信息保证页面切换
        setUser({ id: user.uid, email: user.email });
      } finally {
        setLoading(false);
      }
    } else {
      setUser(null);
      setLoading(false);
    }
  });

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

方案二：注册时等待Firestore写入完成，移除手动导航 #

调整注册组件的onRegisterPress方法，确保Firestore写入完成后再结束流程，让Auth状态监听能正确获取到完整的用户数据，同时移除手动导航，交给App.js的条件渲染自动处理页面切换：

const onRegisterPress = () => {
  if (password !== confirmPassword) {
    alert("Passwords don't match.");
    return;
  }
  auth()
    .createUserWithEmailAndPassword(email, password)
    .then(async response => {
      const uid = response.user.uid;
      const data = {
        id: uid,
        email,
        fullName,
      };
      const usersRef = firestore().collection('users');
      // 等待Firestore写入操作完成
      await usersRef.doc(uid).set(data);
      // 这里不需要手动导航，Auth状态变更会触发App.js重绘
      console.log('用户注册成功，数据已保存');
    })
    .catch(error => {
      alert(error);
    });
};

方案三：调整导航栈结构（可选，不推荐无权限控制的场景） #

如果你希望导航栈始终包含Home屏幕，可以修改App.js的导航配置，然后在HomePage组件内做权限判断：

<Stack.Navigator>
  <Stack.Screen name="Home">
    {props => <HomePage {...props} extraData={user} />}
  </Stack.Screen>
  <Stack.Screen name="Login" component={LoginScreen} />
  <Stack.Screen name="Registration" component={RegistrationScreen} />
</Stack.Navigator>

然后在HomePage组件中添加权限校验：

import { useEffect } from 'react';

export default function HomePage({ navigation, extraData }) {
  useEffect(() => {
    if (!extraData) {
      navigation.navigate('Login');
    }
  }, [extraData]);

  // 其他组件逻辑...
}

额外提醒 #

• 一定要在useEffect中返回onAuthStateChanged的unsubscribe函数，避免组件卸载后出现内存泄漏。
• 注册流程中要处理Firestore写入失败的情况，防止出现“Auth用户创建成功，但用户数据没保存”的异常状态。
• 可以在App.js初始化时，先用auth().currentUser获取当前用户作为初始状态，提升页面加载体验。

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