React+Firebase认证组件渲染遇重复渲染/钩子调用错误求助

错误原因分析 #

1. Too Many Re-Renders错误：直接在组件顶层调用setUser(useAuthentication())，会导致每次组件渲染都触发状态更新，进而引发无限渲染循环。
2. Hook调用规则错误：在useEffect回调内调用useAuthentication违反了React Hook的核心规则——Hook必须在组件的顶层作用域调用，不能嵌套在回调、条件判断等代码块中。

解决方案一：封装正确的自定义认证Hook #

自定义Hook内部处理Firebase的认证状态监听，返回稳定的用户状态（加载中/未登录/已登录）：

import { useState, useEffect } from 'react';
import { getAuth, onAuthStateChanged } from 'firebase/auth';

// 自定义Hook：处理Firebase认证状态
function useAuthentication() {
  const [user, setUser] = useState("pending");
  const auth = getAuth();

  useEffect(() => {
    // 订阅Firebase认证状态变化
    const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
      // 若currentUser为null，设为null表示未登录；否则返回用户对象
      setUser(currentUser ?? null);
    });

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

  return user;
}

// App组件使用自定义Hook
function App() {
  const user = useAuthentication();

  // 加载状态时直接返回加载界面
  if (user === "pending") {
    return (
      <div className="app">
        <Header />
        <div>Loading...</div>
      </div>
    );
  }

  // 根据用户状态渲染对应组件
  return (
    <div className="app">
      <Header />
      {!user ? <Login /> : <RouterProvider router={router} />}
    </div>
  );
}

解决方案二：直接在App组件内处理认证监听 #

如果不需要封装Hook，可直接在App组件中通过useEffect订阅Firebase认证状态：

import { useState, useEffect } from 'react';
import { getAuth, onAuthStateChanged } from 'firebase/auth';

function App() {
  const [user, setUser] = useState("pending");
  const auth = getAuth();

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
      setUser(currentUser ?? null);
    });

    return unsubscribe;
  }, [auth]);

  if (user === "pending") {
    return (
      <div className="app">
        <Header />
        <div>Loading...</div>
      </div>
    );
  }

  return (
    <div className="app">
      <Header />
      {!user ? <Login /> : <RouterProvider router={router} />}
    </div>
  );
}

关键说明 #

• 使用Firebase的onAuthStateChanged实时监听认证状态，无需手动重复检查，状态变化时自动更新组件。
• useEffect的空依赖数组确保订阅逻辑仅在组件挂载时执行一次，避免重复触发。
• 加载状态的提前返回简化了条件判断逻辑，避免冗余代码。

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