Next.js使用Firebase8.9出现onAuthStateChanged非函数报错如何解决

错误根因 #

你当前安装的react-firebase-hooks版本过高，v5及以上版本仅适配Firebase 9+的模块化API，和你使用的Firebase 8.9不兼容，因此调用useAuthState时底层找不到对应版本的onAuthStateChanged方法触发报错。

解决步骤 #

方案1：降级react-firebase-hooks到适配Firebase8的版本（推荐，适配你当前教程的技术栈） #

• 卸载现有版本的react-firebase-hooks：

npm uninstall react-firebase-hooks

• 安装支持Firebase8的v4版本：

npm install react-firebase-hooks@4.0.2

• 删除项目根目录下的.next缓存文件夹，重启开发服务器即可解决报错。

方案2：升级Firebase到9+兼容模式（如果后续想使用新版Firebase特性） #

如果不想降级hooks，可以将Firebase调整为v9+的兼容导入写法适配现有逻辑，不过需要调整firebase.js配置，不建议和旧教程搭配使用。

补充：完善登录态判断逻辑 #

你当前的_app.js没有实现登录态跳转逻辑，修改代码如下即可实现需求：

import '../styles/globals.css'
import { useAuthState } from "react-firebase-hooks/auth"
import { auth } from "../firebase"
import Login from "./login"

function MyApp({ Component, pageProps }) {
  // 新增loading状态避免登录态判断前闪屏
  const [user, loading] = useAuthState(auth);

  // 加载中可以自定义加载动画
  if (loading) return <div>加载中...</div>

  // 未登录返回登录页
  if (!user) return <Login />

  // 已登录进入对应页面
  return <Component {...pageProps} />;
}

export default MyApp

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