Angular项目导入Firebase后出现firebase.database is not a function错误

错误原因 #

你遇到的这个错误，本质是Firebase的核心App模块里并不包含Realtime Database的实现——你只导入了firebase/app，但没引入数据库对应的模块，导致调用firebase.database()时找不到该方法。另外，你的代码还有一个Angular规范问题需要修正。

分步解决方案 #

1. 修正Firebase模块导入（兼容旧写法）

如果你想继续用传统的命名空间式写法（比如firebase.database()），需要导入Firebase的compat兼容版本，并显式引入Realtime Database模块：

• 先确保已经安装了firebase包（没安装的话执行：npm install firebase）
• 修改组件中的导入语句：

  // 替换原来的firebase/app导入
  import * as firebase from 'firebase/compat/app';
  // 显式导入Realtime Database的兼容模块
  import 'firebase/compat/database';
  import { firebaseConfig } from './firebaseConfig';
  

2. 修正Angular组件与模块的错误写法

你的代码里把@NgModule和@Component同时装饰在同一个类上，这不符合Angular规则——一个类要么是模块，要么是组件，不能同时是两者。需要移除类上的@NgModule装饰器，然后把组件添加到某个模块的declarations数组中（比如AppModule）：

修正后的组件代码：

import { Component } from '@angular/core';
import * as firebase from 'firebase/compat/app';
import 'firebase/compat/database';
import { firebaseConfig } from './firebaseConfig';

@Component({
  selector: 'practiceFb',
  template: ``
})
export class practiceFb {
  constructor() {
    firebase.initializeApp(firebaseConfig);
    const theItem = firebase.database().ref('TheItem');
    theItem.on("value", (snapshot) => {
      console.log(snapshot.val());
    });
  }
}

然后在AppModule中声明这个组件：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { practiceFb } from './path-to-your-component'; // 替换成组件的实际路径

@NgModule({
  declarations: [
    practiceFb // 添加组件到声明数组
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [practiceFb] // 如果这个是根组件的话，否则换成你的根组件
})
export class AppModule { }

3. （可选）升级到Firebase模块化API（推荐）

如果你想使用Firebase v9+的轻量化模块化API（支持Tree Shaking，打包体积更小），可以调整代码如下：

import { Component } from '@angular/core';
import { initializeApp } from 'firebase/app';
import { getDatabase, ref, onValue } from 'firebase/database';
import { firebaseConfig } from './firebaseConfig';

@Component({
  selector: 'practiceFb',
  template: ``
})
export class practiceFb {
  constructor() {
    const app = initializeApp(firebaseConfig);
    const db = getDatabase(app);
    const theItemRef = ref(db, 'TheItem');
    onValue(theItemRef, (snapshot) => {
      console.log(snapshot.val());
    });
  }
}

这是Firebase官方推荐的写法，不需要导入compat模块，代码更简洁高效。

最后验证 #

完成上述修改后，重新执行ng serve，控制台的database is not a function错误应该就会消失，Angular的模块规范问题也得到了解决，你的组件就能正常读取Realtime Database中的数据了。

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