Ionic集成Firebase8出现this.afs.collection is not a function错误求助

你当前遇到的this.afs.collection is not a function错误核心来自app.module.ts的错误配置：你在providers数组里手动覆盖了AngularFirestore的注入值为一个空对象：

// 错误配置，直接导致注入的afs是无任何方法的空对象
{ provide: AngularFirestore, useValue: {} },

AngularFirestore的实例本应由@angular/fire内部自动提供，你手动指定useValue为空对象后，注入到组件里的afs自然不存在collection等内置方法。 #

排查解决步骤 #

• 第一步：删除app.module.ts providers数组里的{ provide: AngularFirestore, useValue: {} }这行配置，不需要手动声明AngularFirestore为provider，你已经在imports里导入了AngularFirestoreModule，它会自动完成依赖注入
• 第二步：清理冗余的Firebase相关依赖，避免包冲突：
  你同时安装了web端Firebase SDK（@angular/fire、firebase）和原生端Firebase Cordova插件（cordova-plugin-firebase、cordova-plugin-firebasex、@ionic-native/firebase、@ionic-native/firebase-x），两类功能重叠的包会导致运行时冲突，根据你的使用场景二选一即可：
  • 如果仅需要web端操作Firestore，保留@angular/fire、firebase即可，卸载所有cordova-plugin-firebase相关插件和对应的@ionic-native/firebase包
  • 如果需要原生端推送、认证等能力，优先保留firebasex系列，移除旧的cordova-plugin-firebase相关依赖
• 第三步：重置依赖缓存：
  删除node_modules文件夹、package-lock.json文件后，重新执行npm install安装依赖
• 第四步：检查组件内的注入方式，确保你是通过构造函数正确注入AngularFirestore：

  import { AngularFirestore } from '@angular/fire/firestore';
  
  constructor(private afs: AngularFirestore) { }
  

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