调用Firebase auth报错auth is not a function的解决方案求助

问题根因 #

该报错由Firebase版本不兼容导致：你本地安装的是v9.0及以上版本的Firebase，该版本全面切换为模块化API设计，废弃了v8及更早版本app.auth()这类命名空间式的调用语法，因此识别不到auth方法。

方案1：适配v9+版本API（推荐） #

第一步：修改../firebase配置文件 #

// 你的firebase配置文件示例
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

// 替换为你自己的Firebase项目配置
const firebaseConfig = {
  apiKey: "你的项目参数",
  authDomain: "你的项目参数",
  projectId: "你的项目参数",
  storageBucket: "你的项目参数",
  messagingSenderId: "你的项目参数",
  appId: "你的项目参数"
};

const app = initializeApp(firebaseConfig);
// 导出auth实例供业务代码调用
export const auth = getAuth(app);
export default app;

第二步：修改AuthProvider代码 #

import React, {useEffect, useState} from "react"
import { auth } from '../firebase'
import { onAuthStateChanged } from "firebase/auth";

export const AuthContext = React.createContext();

export const AuthProvider = ({ children }) => {
    const [currentUser, setCurrentUser] = useState(null);

    useEffect(() => {
        // 替换原有的app.auth()调用方式
        const unsubscribe = onAuthStateChanged(auth, setCurrentUser);
        // 组件卸载时取消监听，避免内存泄漏
        return unsubscribe;
       }, []);

       return (
           <AuthContext.Provider value={{currentUser}}>
               {children}
           </AuthContext.Provider>
       )
}

修改完成后重启项目即可生效。

方案2：降级到v8版本（无需修改现有代码） #

如果你不想调整现有代码逻辑，可以直接将Firebase版本回退到最后一个v8稳定版，执行以下安装命令即可：

npm install firebase@8.10.0
# 若使用yarn则执行
yarn add firebase@8.10.0

安装完成后重启项目，原有的app.auth()写法就可以正常运行。

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