React 18+Firebase 9聊天应用路由保护失效及Hook报错排查

错误原因拆解 #

1. 初始代码的「ProtectedRoute未定义」错误 #

初始App.js中，ProtectedRoute是定义在App组件内部的函数，但router是在组件外部的顶层作用域创建的。此时创建router时，ProtectedRoute还未被定义（组件内部变量仅在组件渲染时初始化），因此触发ReferenceError。

2. 更新后代码的「useContext不能在顶层调用」错误 #

更新后的代码将useContext(AuthContext)放在了App组件外部的顶层作用域，违反了React Hook核心规则：Hook只能在React组件或自定义Hook内部调用，不能在顶层、条件判断、循环等非组件渲染流程中使用。

正确实现方案 #

以下两种规范方案任选其一即可：

方案一：创建独立的ProtectedRoute组件 #

将路由保护逻辑封装为独立组件，内部调用useContext获取认证状态，既符合Hook规则，又能保证作用域清晰。

1. 创建ProtectedRoute组件

// src/components/ProtectedRoute.js
import { useContext } from 'react';
import { Navigate } from 'react-router-dom';
import { AuthContext } from '../contexts/AuthContext';

export const ProtectedRoute = ({ children }) => {
  const { currentUser } = useContext(AuthContext);

  // 处理Firebase认证加载阶段（初始时currentUser为undefined）
  if (currentUser === undefined) {
    return <div>加载中...</div>; // 可替换为自定义加载组件
  }

  // 已认证则渲染子组件，未认证则跳转到登录页
  return currentUser ? children : <Navigate to="/auth/login" replace />;
};

2. 修改App.js导入并使用组件

// src/App.js
import {
  createBrowserRouter,
  createRoutesFromElements,
  Route,
  RouterProvider
} from 'react-router-dom';
import RootLayout from './layouts/RootLayout';
import AuthLayout from './layouts/AuthLayout';
import Chat from './pages/Chat';
import Register from './pages/Register';
import Login from './pages/Login';
// 导入独立的ProtectedRoute组件
import { ProtectedRoute } from './components/ProtectedRoute';

// 顶层创建router，此时ProtectedRoute已导入，作用域有效
const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<RootLayout />}>
      <Route index
        element={
          <ProtectedRoute>
            <Chat />
          </ProtectedRoute>
        } />

      <Route path="auth" element={<AuthLayout />}>
        <Route path="register" element={<Register />} />
        <Route path="login" element={<Login />} />
      </Route>
    </Route>
  )
);

function App() {
  return <RouterProvider router={router} />;
}

export default App;

方案二：在App组件内部创建router #

将router的创建逻辑移到App组件内部，确保ProtectedRoute和useContext都在组件作用域内调用。

// src/App.js
import { useContext } from 'react';
import {
  createBrowserRouter,
  createRoutesFromElements,
  Route,
  RouterProvider,
  Navigate
} from 'react-router-dom';
import RootLayout from './layouts/RootLayout';
import AuthLayout from './layouts/AuthLayout';
import Chat from './pages/Chat';
import Register from './pages/Register';
import Login from './pages/Login';
import { AuthContext } from './contexts/AuthContext';

function App() {
  // 组件内部调用useContext，符合Hook规则
  const { currentUser } = useContext(AuthContext);

  // 组件内部定义ProtectedRoute，作用域有效
  const ProtectedRoute = ({ children }) => {
    if (currentUser === undefined) {
      return <div>加载中...</div>;
    }
    return currentUser ? children : <Navigate to="/auth/login" replace />;
  };

  // 组件内部创建router，可访问到ProtectedRoute
  const router = createBrowserRouter(
    createRoutesFromElements(
      <Route path="/" element={<RootLayout />}>
        <Route index
          element={
            <ProtectedRoute>
              <Chat />
            </ProtectedRoute>
          } />

        <Route path="auth" element={<AuthLayout />}>
          <Route path="register" element={<Register />} />
          <Route path="login" element={<Login />} />
        </Route>
      </Route>
    )
  );

  return <RouterProvider router={router} />;
}

export default App;

关键注意点 #

• Firebase的onAuthStateChanged初始触发时，currentUser会是undefined，必须处理这个加载状态，避免用户在认证状态未确定时被错误跳转。
• 使用Navigate组件时加上replace属性，防止未认证用户通过后退按钮回到受保护路由的历史记录。

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