如何实现登录后自动切换组件？useEffect未生效问题解决

问题根源 #

你当前的实现存在两个核心问题：

1. Auth初始化异步性：页面刷新时，Firebase Auth的auth.currentUser初始化是异步操作，组件挂载时它还处于null状态，导致user状态被设置为null，后续Auth初始化完成后没有触发状态更新。
2. 依赖监听失效：useEffect依赖auth.currentUser时，由于currentUser是对象类型，只有当它的引用发生变化时才会触发回调，但Firebase Auth的状态更新不一定会改变currentUser的引用，导致无法捕获登录状态变化。

可行解决方案 #

方案1：使用onAuthStateChanged监听状态变化 #

这是Firebase Auth官方推荐的状态监听方式，能实时捕获登录、登出及Auth初始化完成后的状态变化：

修改Properties组件：

const Properties = () => {
  const [user, setUser] = useState(null);

  useEffect(() => {
    // 订阅Auth状态变更事件
    const unsubscribe = auth.onAuthStateChanged((currentUser) => {
      setUser(currentUser);
    });

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

  return (
    <>
      <Head>
        <title>Add Property</title>
        <meta name="keywords" content="web dev" />
      </Head>
      <h1>Add Property</h1>
      <p>Welcome to the add Property new</p>

      {user ? <AddProperty /> : <Login />}
    </>
  );
};

export default Properties;

方案2：封装自定义Hook复用Auth状态逻辑 #

如果多个组件需要使用登录状态，可以把监听逻辑抽成自定义Hook，提高代码复用性：

// 自定义Auth Hook
const useAuth = () => {
  const [user, setUser] = useState(null);

  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged(setUser);
    return unsubscribe;
  }, []);

  return user;
};

// 在Properties组件中使用
const Properties = () => {
  const user = useAuth();

  return (
    <>
      <Head>
        <title>Add Property</title>
        <meta name="keywords" content="web dev" />
      </Head>
      <h1>Add Property</h1>
      <p>Welcome to the add Property new</p>

      {user ? <AddProperty /> : <Login />}
    </>
  );
};

export default Properties;

补充说明 #

• onAuthStateChanged会在以下场景触发回调：页面初始化完成Auth加载、用户登录成功、用户登出，完全覆盖你需要的状态同步场景。
• 登录组件无需额外修改，signInWithEmailAndPassword成功后，onAuthStateChanged会自动捕获状态变化并更新user，从而触发组件切换。

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