Angular项目添加@angular/fire后运行ng serve遇类型错误

针对你遇到的firebase.storage命名空间缺失成员、语法识别错误、类型定义找不到等问题，可按以下步骤排查解决：

1. 对齐依赖版本兼容性 #

Angular 12.x 搭配 @angular/fire 7.5.0 时，firebase 9.0.2 属于早期版本，类型定义存在不完善的情况。建议卸载现有依赖后，重新安装兼容的版本组合：

npm uninstall firebase @angular/fire
npm install @angular/fire@7.5.0 firebase@9.22.0

（@angular/fire 7.5.0 的 peer 依赖要求 firebase ^9.0.0，9.22.0 版本修复了大量早期类型定义问题）

2. 修正TypeScript配置 #

检查项目根目录的 tsconfig.json，确保编译器配置符合要求：

• 将 compilerOptions.moduleResolution 设置为 node
• 将 compilerOptions.target 设置为 ES2020 或更高版本
• 若临时需要跳过库类型检查（不推荐长期使用），可将 compilerOptions.skipLibCheck 设置为 true

3. 清理缓存并重建项目 #

缓存或依赖残留可能导致类型错误，执行以下操作彻底清理：

# 删除依赖目录和锁文件
rm -rf node_modules package-lock.json
# 重新安装依赖
npm install
# 清理Angular缓存
ng cache clean
# 重启开发服务
ng serve

4. 修正Firebase导入方式 #

Firebase 9.x 采用模块化API，避免使用旧的命名空间导入方式，改用模块化导入：

// 正确的模块化导入
import { getStorage, UploadTask } from 'firebase/storage';
import { FirebaseStorageError } from 'firebase/storage';

不要混用 import * as firebase from 'firebase/app' 这类旧写法，否则会触发类型不匹配问题。

5. 同步Angular CLI版本 #

确保Angular CLI版本与项目Angular版本一致（均为12.x）：

# 查看当前版本
ng version
# 安装对应版本CLI（全局+本地）
npm install @angular/cli@12.x -g
npm install @angular/cli@12.x --save-dev

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