React应用集成Firebase认证时出现「Property 'auth' does not exist on type 'FirebaseApp'」错误求助

这个问题我之前也碰到过！核心原因是你安装的Firebase版本是9.0.2，它采用了全新的模块化API架构（主打树摇优化，减小打包体积），不再支持旧版本里app.auth()这种命名空间式的调用方式，所以TypeScript会报出类型不存在的错误。

下面给你两种可行的解决方案：

方案1：使用Firebase 9推荐的模块化API（推荐） #

这是Firebase官方主推的写法，能充分利用树摇特性，减少最终打包的代码体积。你只需要修改firebase.js的导入和初始化方式：

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth"; // 替换旧的import 'firebase/auth'

const firebaseConfig = {
  apiKey: "AIzaSyA_89k1bt6Z2_1lVLb_Vwn5OL9_GgTNQEQ",
  authDomain: "auth-development-59396.firebaseapp.com",
  projectId: "auth-development-59396",
  storageBucket: "auth-development-59396.appspot.com",
  messagingSenderId: "1003786595756",
  appId: "1:1003786595756:web:fa93ae00e49a4c04c49e09"
};

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app); // 用getAuth函数获取auth实例
export default app;

后续你使用Auth相关功能时，也要采用模块化的导入方式，比如登录操作：

import { signInWithEmailAndPassword } from "firebase/auth";
import { auth } from './firebase';

const handleLogin = async (email, password) => {
  try {
    await signInWithEmailAndPassword(auth, email, password);
    // 登录成功后的逻辑
  } catch (err) {
    console.error('登录失败:', err.message);
  }
};

方案2：启用兼容模式（快速过渡） #

如果你不想大面积修改现有代码，可以启用Firebase的兼容模式，这样就能继续使用app.auth()这种旧写法：

// 导入兼容版的Firebase App和Auth
import firebase from "firebase/compat/app";
import "firebase/compat/auth";

const firebaseConfig = {
  // 你的配置信息
};

const app = firebase.initializeApp(firebaseConfig);
export const auth = app.auth(); // 可以继续用旧的调用方式
export default app;

⚠️ 注意：兼容模式会引入完整的Firebase SDK，无法享受到树摇优化带来的体积减小，所以如果是新项目，更推荐方案1。

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