React项目使用Firebase认证报错firebaseApp.auth is not a function如何解决？

错误原因 #

该报错核心是Firebase版本语法不匹配导致：你当前项目安装的是v9及以上版本的Firebase，该版本默认采用模块化API设计，不再支持你代码中使用的v8版本命名空间式调用语法。

解决方案 #

方案1：兼容旧写法（无需调整现有业务逻辑） #

仅修改Firebase配置文件的导入语句，使用兼容包适配v8语法即可：

import * as firebase from "firebase/compat/app"
import "firebase/compat/auth"

// 后续原有代码保持不变
const firebaseApp=firebase.initializeApp({
    apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket:process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID
})
export const auth=firebaseApp.auth()
export default firebaseApp

方案2：使用v9模块化写法（官方推荐） #

直接适配新版本的模块化API，可获得更小的打包体积、更好的性能：

import { initializeApp } from "firebase/app"
import { getAuth } from "firebase/auth"

const firebaseApp = initializeApp({
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket:process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID
})

export const auth = getAuth(firebaseApp)
export default firebaseApp

其他排查点 #

• 依赖安装异常：删除项目下的node_modules文件夹、package-lock.json或yarn.lock文件后重新执行安装命令验证
• 重复初始化：确认项目中没有多处调用firebase.initializeApp的逻辑，避免实例异常

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