Angular中Firebase Firestore组件报错：未创建[DEFAULT]应用

核心问题原因 #

你通过AngularFireModule.initializeApp()完成初始化后，直接调用firebase.firestore()的compat模式方法时，没有关联到AngularFire已经初始化好的Firebase App实例，导致找不到DEFAULT app。

方案一：使用AngularFire提供的注入式服务（推荐） #

AngularFire已经封装了Firestore的操作，直接通过依赖注入使用官方提供的服务，无需手动调用compat全局方法：

1. 在组件中导入并注入AngularFirestore：

import { Component } from '@angular/core';
import { AngularFirestore } from '@angular/fire/compat/firestore';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponentComponent {
  constructor(private firestore: AngularFirestore) {}

  // 示例：获取集合数据
  fetchData() {
    this.firestore.collection('your-collection').valueChanges().subscribe(data => {
      console.log(data);
    });
  }
}

方案二：强制关联AngularFire初始化的App实例（兼容compat模式） #

如果必须使用compat模式的代码，需要通过AngularFire获取已初始化的App实例，再从中获取Firestore：

1. 导入AngularFireApp并注入：

import { Component, OnInit } from '@angular/core';
import firebase from 'firebase/compat/app';
import 'firebase/compat/firestore';
import { AngularFireApp } from '@angular/fire/compat';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponentComponent implements OnInit {
  private db: firebase.firestore.Firestore;

  constructor(private afApp: AngularFireApp) {}

  ngOnInit(): void {
    // 从AngularFire的App实例中获取Firestore
    this.db = this.afApp.firestore();
    // 后续即可用this.db执行操作
    this.db.collection('your-collection').get().then(snapshot => {
      snapshot.forEach(doc => {
        console.log(doc.data());
      });
    });
  }
}

额外检查点 #

• 如果该组件属于懒加载模块，确保对应模块中也导入了AngularFirestoreModule，否则依赖注入无法生效。

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