网上找的Firebase代码片段报auth属性不存在的TypeScript错误是为什么？

核心原因 #

你搜索到的const auth = app.auth()是Firebase 8.x及更早版本的API写法，如果你本地安装的是9.x及以上版本的Firebase SDK，默认采用模块化API设计，已不再支持将auth、firestore等服务直接挂载在FirebaseApp实例上的调用方式，因此会触发类型报错。

解决方案 #

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

新版API支持tree-shaking，打包体积更小，适配方式如下：

• 单独导入对应服务的初始化方法
• 代码示例：

// 导入核心依赖
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

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

// 初始化应用
const app = initializeApp(firebaseConfig);
// 初始化auth实例，替换原有app.auth()写法
const auth = getAuth(app);

• 其他Firebase服务的用法同理，例如Firestore需要导入getFirestore方法初始化，Storage需要导入getStorage方法初始化。

方案2：兼容旧版API写法（无需修改存量代码） #

如果不想调整现有代码逻辑，可以选择两种兼容方案：

• 方案A：使用新版SDK的兼容包
  导入路径改为compat分支即可保留旧版命名空间写法：

  import firebase from "firebase/compat/app";
  import "firebase/compat/auth";
  
  const app = firebase.initializeApp(firebaseConfig);
  const auth = app.auth(); // 写法与8.x版本完全一致
  

• 方案B：降级SDK到8.x版本
  执行安装命令指定版本即可：
  npm install firebase@8.10.0

额外类型问题排查 #

如果调整写法后仍有TypeScript类型报错，可以尝试以下操作：

• 删除node_modules文件夹和package-lock.json/yarn.lock文件后重新执行依赖安装
• 单独安装auth类型声明包：npm install @firebase/auth-types@latest

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