React导航栏仅在构建后出现报错 部署到Firebase后页面全白无内容

问题原因及解决方案 #

1. 优先检查Hook调用规则的生产校验要求

虽然本地开发模式运行正常，但React生产构建会对Hook调用规则做更严格的校验，首先确认你的导航组件完整代码里，所有Hook调用都放在组件最顶层，没有被任何条件判断、提前return逻辑包裹。如果存在if (xxx) return <div/>这类代码写在Hook调用之前的情况，生产构建会直接判定为Hook条件调用，抛出异常导致页面白屏。

2. 修正useAuthState的传参写法

你当前代码中useAuthState(auth())的写法存在隐患：每次组件渲染都会调用auth()生成新的Firebase Auth实例，开发模式下没有触发异常，但生产构建后实例的频繁变更会导致Hook状态紊乱，连带后续useState调用报错。
正确写法是先在你的Firebase配置文件中初始化并导出固定的Auth实例，直接传入实例即可：

//  firebase配置文件 比如src/firebase.js
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

const app = initializeApp(你的Firebase配置);
export const auth = getAuth(app);

// 导航组件中导入后直接用
import { auth } from "你的firebase配置文件路径";
const [user] = useAuthState(auth); // 不要加括号调用auth()

3. 检查react-router-dom版本兼容性

如果你项目使用的是react-router-dom v6及以上版本，useHistory已经被官方移除，替换为useNavigate接口。开发模式下可能仅抛出警告不阻断运行，但生产构建后会直接报错导致组件渲染失败。
如果是v6版本，替换相关代码即可：

// 替换前
const history = useHistory();
history.push("/")

// 替换后
import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
navigate("/")

4. 确认Firebase托管重定向配置

检查项目根目录的firebase.json文件，确保托管配置中添加了SPA应用所需的重定向规则，避免前端路由资源404导致组件加载异常：

{
  "hosting": {
    "public": "build",
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

按以上步骤排查修改完成后，重新执行npm run build构建项目，再部署到Firebase托管即可恢复正常。

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