如何通过AngularFire调用Firebase可调用云函数（Callable Cloud Functions）

我来帮你梳理一套完整的可落地方案，完全匹配你当前的技术栈——Cloud Functions v1、Node.js 16，还有Angular 16 + AngularFire 7.5.0。咱们分云函数端实现和Angular端调用两部分来讲，每一步都给你实用的代码示例。

一、云函数端：编写带认证校验的Callable函数 #

首先在你的Cloud Functions项目里，编写一个onCall类型的函数，它会自动处理用户认证，并且只会返回当前登录用户自己的数据：

const functions = require("firebase-functions");
const admin = require("firebase-admin");
admin.initializeApp();

// 定义可调用云函数，用于获取当前用户的专属数据
exports.getUserData = functions.https.onCall(async (data, context) => {
  // 第一步：检查用户是否已完成认证
  if (!context.auth) {
    throw new functions.https.HttpsError(
      "unauthenticated",
      "请先登录，才能访问个人数据"
    );
  }

  const userId = context.auth.uid;
  try {
    // 第二步：从实时数据库中读取当前用户的数据（这里假设你的数据存在`users/{userId}`路径下）
    const userRef = admin.database().ref(`users/${userId}`);
    const snapshot = await userRef.once("value");
    const userData = snapshot.val();

    // 如果用户数据不存在，抛出对应错误
    if (!userData) {
      throw new functions.https.HttpsError(
        "not-found",
        "未找到你的个人数据"
      );
    }

    // 返回成功结果和用户数据
    return { success: true, data: userData };
  } catch (error) {
    // 捕获并抛出内部错误
    throw new functions.https.HttpsError(
      "internal",
      "获取数据时出现异常",
      error.message
    );
  }
});

这段代码的关键点： #

• context.auth：自动包含当前登录用户的认证信息，无需你手动处理token校验
• functions.https.HttpsError：抛出标准化的错误，前端可以直接捕获并处理不同类型的错误（比如未认证、资源不存在等）
• 用await处理实时数据库的异步读取操作，确保数据获取完成后再返回结果

写完之后，用命令部署你的云函数：

firebase deploy --only functions

二、Angular端：通过AngularFire调用Callable函数 #

接下来在Angular项目里，实现调用这个云函数的逻辑，步骤如下：

1. 确保已配置AngularFire #

首先确认你的Angular项目已经导入了AngularFireFunctionsModule，在你的根模块（比如AppModule）里：

import { NgModule } from '@angular/core';
import { AngularFireModule } from '@angular/fire/compat';
import { AngularFireFunctionsModule } from '@angular/fire/compat/functions';
import { environment } from '../environments/environment';

@NgModule({
  imports: [
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireFunctionsModule // 导入云函数模块
  ]
})
export class AppModule { }

2. 创建服务封装云函数调用 #

最好把云函数调用逻辑封装到服务里，方便在多个组件中复用：

import { Injectable } from '@angular/core';
import { AngularFireFunctions } from '@angular/fire/compat/functions';
import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class UserDataService {
  constructor(private fns: AngularFireFunctions) {}

  // 封装获取用户数据的方法
  getUserData(): Observable<any> {
    // 创建可调用函数的引用，参数是云函数的名称（和你部署的函数名一致）
    const callableFn = this.fns.httpsCallable('getUserData');
    // 如果需要给云函数传参数，比如筛选条件，可以在括号里传入对象，比如callableFn({ filter: 'profile' })
    return callableFn({});
  }
}

3. 在组件中使用服务调用云函数 #

在需要展示用户数据的组件里，注入服务并处理返回结果：

import { Component, OnInit } from '@angular/core';
import { UserDataService } from './user-data.service';
import { catchError } from 'rxjs/operators';
import { of } from 'rxjs';

@Component({
  selector: 'app-user-profile',
  template: `
    <div class="user-data-container" *ngIf="userData">
      <h3>你的个人数据</h3>
      <pre>{{ userData | json }}</pre>
    </div>
    <div class="error-message" *ngIf="errorMsg">{{ errorMsg }}</div>
  `,
  styles: [`
    .error-message { color: red; margin-top: 1rem; }
    pre { background: #f5f5f5; padding: 1rem; border-radius: 4px; }
  `]
})
export class UserProfileComponent implements OnInit {
  userData: any;
  errorMsg: string = '';

  constructor(private userDataService: UserDataService) {}

  ngOnInit(): void {
    this.userDataService.getUserData()
      .pipe(
        // 捕获云函数抛出的错误
        catchError((error) => {
          this.errorMsg = error.message;
          return of(null);
        })
      )
      .subscribe((response) => {
        if (response?.success) {
          this.userData = response.data;
        }
      });
  }
}

三、关键注意事项 #

• 用户认证前提：确保你的Angular项目已经集成了AngularFire Auth，用户必须先登录，否则调用云函数时会触发unauthenticated错误
• 错误处理：云函数抛出的HttpsError会被AngularFire自动包装成Observable的错误，你可以通过catchError操作符捕获并展示给用户
• 参数传递：如果需要给云函数传参数，只需要在callableFn({ ... })里传入对应的对象，云函数端通过data参数获取即可

备注：内容来源于stack exchange，提问作者Marian07