React使用Firebase做登录认证时报auth is not a function如何解决？

这个报错90%以上的场景是你使用了Firebase v9及以上的模块化版本，但写的代码是适配Firebase v8的命名空间式语法。v9版本开始Firebase全面改用 tree-shaking 友好的模块化API，彻底移除了firebase.auth()这种实例方法调用方式，所以会报auth is not a function的错误。
少数场景是你没有正确导入Firebase Auth相关依赖、或者Firebase实例初始化错误导致导出的fire对象本身不完整。

方案1（推荐）：适配新版模块化API #

这是官方推荐的写法，打包体积更小，后续维护性更好。

1. 首先修改你的Firebase初始化配置文件（一般是firebase.js/fire.js，也就是你导出fire对象的文件）：

// 导入模块化核心方法
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

// 替换为你自己的Firebase项目配置
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_SENDER_ID",
  appId: "YOUR_APP_ID"
};

// 初始化Firebase应用
const app = initializeApp(firebaseConfig);
// 初始化Auth实例并导出
export const auth = getAuth(app);

2. 然后修改你触发报错的组件代码：

// 从firebase/auth导入监听方法，导入刚才导出的auth实例
import { onAuthStateChanged } from "firebase/auth";
import { auth } from "./你的firebase配置文件相对路径";

const authListener = () => {
  // 新版写法直接把auth实例作为第一个参数传入
  onAuthStateChanged(auth, (user) => {
    if (user) {
      clearInputs();
      setUser(user);
    } else {
      setUser("");
    }
  })
};

方案2（临时兼容）：使用v8兼容包 #

如果你不想改现有大量v8语法的代码，可以暂时用官方提供的兼容包，只需要修改导入路径即可：
修改Firebase配置文件的导入语句：

// 用compat路径导入兼容版本的核心包
import firebase from "firebase/compat/app";
// Auth也要导入compat版本
import "firebase/compat/auth";

const firebaseConfig = {
  // 你的配置不变
};

// 初始化和导出写法和v8完全一致
const fire = firebase.initializeApp(firebaseConfig);
export default fire;

修改完之后你原来的fire.auth().onAuthStateChanged()写法可以直接正常运行，不过兼容包未来会被废弃，仅建议临时过渡使用。

如果修改完还是报错，可以检查：

• 有没有重复初始化Firebase实例
• 导出的Auth实例和调用的是否为同一个
• 项目依赖里有没有同时安装多个版本的Firebase

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