Angular 15集成@angular/fire报错：需提供Firebase配置选项(app/no-options)

错误原因分析 #

这个报错FirebaseError: Firebase: Need to provide options, when not being deployed to hosting via source. (app/no-options)本质是Firebase应用未完成初始化，调用getDatabase()时找不到有效的配置选项。下面结合你提到的关键文件逐一排查修复：

1. 确认Firebase配置文件正确 #

首先确保项目src/environments/目录下的environment.ts（开发环境）和environment.prod.ts（生产环境）包含从Firebase控制台复制的完整配置：

// src/environments/environment.ts
export const environment = {
  production: false,
  firebase: {
    apiKey: "你的apiKey",
    authDomain: "你的authDomain",
    databaseURL: "你的databaseURL",
    projectId: "你的projectId",
    storageBucket: "你的storageBucket",
    messagingSenderId: "你的messagingSenderId",
    appId: "你的appId"
  }
};

2. 修正AppModule的AngularFire配置 #

在AppModule中必须通过AngularFireModule.initializeApp()传入Firebase配置，同时导入实时数据库所需模块：

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AngularFireModule } from '@angular/fire/compat';
import { AngularFireDatabaseModule } from '@angular/fire/compat/database';
import { environment } from '../environments/environment';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    // 初始化Firebase应用
    AngularFireModule.initializeApp(environment.firebase),
    // 导入实时数据库模块
    AngularFireDatabaseModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

注：若使用@angular/fire模块化API（v7+），导入路径为@angular/fire而非@angular/fire/compat，Angular 15搭配@angular/fire 15时两种写法均支持，compat写法更适配现有代码。

3. 修正FirebaseRealtimeDataService的实现 #

不要直接调用原生Firebase的getDatabase()，通过AngularFire提供的AngularFireDatabase服务注入使用，避免手动初始化问题：

// firebase-realtime-data.service.ts
import { Injectable } from '@angular/core';
import { AngularFireDatabase } from '@angular/fire/compat/database';

@Injectable({
  providedIn: 'root'
})
export class FirebaseRealtimeDataService {
  constructor(private db: AngularFireDatabase) { }

  // 示例：获取数据
  getData(path: string) {
    return this.db.list(path).valueChanges();
  }

  // 示例：写入数据
  setData(path: string, data: any) {
    return this.db.object(path).set(data);
  }
}

若一定要使用原生Firebase SDK方法，需先在服务中初始化App：

import { initializeApp } from 'firebase/app';
import { getDatabase } from 'firebase/database';
import { environment } from '../environments/environment';

// 先完成初始化
const app = initializeApp(environment.firebase);
const database = getDatabase(app);

4. 检查package.json依赖版本兼容性 #

确保@angular/fire版本与Angular 15完全匹配，firebase版本也需对应：

{
  "dependencies": {
    "@angular/fire": "^15.0.0",
    "firebase": "^9.22.0",
    "@angular/core": "^15.0.0",
    "@angular/common": "^15.0.0"
  }
}

版本不匹配时执行更新命令：

npm install @angular/fire@15 firebase@9 --save

常见排查点 #

• 检查environment.ts中的firebase配置是否完整，无复制遗漏字段
• 确认AppModule中没有重复初始化Firebase应用
• 确保调用数据库方法前，AngularFire已通过服务注入完成初始化

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