Angular中Firebase对象需声明吗？正确声明及使用方式咨询

问题回顾 #

你提到想把这段原生Firebase的代码搬到Angular里：

function writeUserData(userId, name, email, imageUrl) {
  firebase.database().ref('users/' + userId).set({
    username: name,
    email: email,
    profile_picture : imageUrl
  });
}

但运行时出现了ERROR TypeError: Cannot read property 'database' of undefined的错误，而且已经导入了AngularFireList和AngularFireDatabase，不知道该怎么正确声明和使用对应的对象。

为什么会报错？ #

因为你现在用的是AngularFire2（也就是现在的@angular/fire），它是Firebase官方为Angular封装的库，和原生的firebase全局对象不是一回事。直接用firebase.database()会找不到这个全局对象，所以才会报undefined的错误。

正确的实现步骤 #

1. 确保依赖配置正确 #

首先要确认你已经在项目里正确安装并初始化了AngularFire2：

• 安装依赖：npm install firebase @angular/fire
• 在app.module.ts里导入并配置AngularFireModule和AngularFireDatabaseModule：

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'; // 你的Firebase配置文件

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

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

2. 在组件/服务中注入AngularFireDatabase #

不需要自己声明firebase对象，而是通过依赖注入获取AngularFireDatabase实例，然后用它来操作数据库：

比如在你的组件里：

import { Component } from '@angular/core';
import { AngularFireDatabase } from '@angular/fire/compat/database';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // 通过构造函数注入AngularFireDatabase
  constructor(private db: AngularFireDatabase) { }

  writeUserData(userId: string, name: string, email: string, imageUrl: string): void {
    // 使用AngularFireDatabase的object方法获取对应节点的引用
    this.db.object(`users/${userId}`).set({
      username: name,
      email: email,
      profile_picture: imageUrl
    }).then(() => {
      console.log('数据写入成功！');
    }).catch(error => {
      console.error('写入失败：', error);
    });
  }
}

3. 关于类型的说明 #

• AngularFireDatabase是AngularFire2提供的核心服务，用于和Firebase Realtime Database交互
• this.db.object(path)会返回一个AngularFireObject类型的对象，它提供了set()、update()、remove()等操作方法，和原生Firebase的ref()方法类似，但更贴合Angular的响应式编程模式

额外提示 #

如果你需要监听数据变化（比如实时获取用户数据），可以使用valueChanges()方法：

getUserData(userId: string) {
  return this.db.object(`users/${userId}`).valueChanges();
}

然后在组件里订阅这个Observable来获取实时更新的数据。

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