从Angular调用Firebase Function报400错误，URL直接调用正常

你遇到的问题核心是调用方式不匹配：后端用onRequest创建的是普通HTTP函数，但前端用httpsCallable调用——这是Firebase专门用于Callable函数（onCall）的API，两者参数传递逻辑完全不同，导致后端拿不到ID参数。

下面给两种直接可行的解决方案：

方案一：前端改用HttpClient发起普通HTTP请求 #

既然后端是onRequest的HTTP接口，直接用Angular的HttpClient发GET请求，把ID放在URL查询参数里即可：

import { HttpClient } from '@angular/common/http';
import { inject, ActivatedRoute } from '@angular/core';

@Component({/* 你的组件配置 */})
export class YourComponent {
  private http = inject(HttpClient);
  private route = inject(ActivatedRoute);

  constructor() {
    const id = this.route.snapshot.params['id'];
    // 替换成你的云函数实际URL
    const functionUrl = 'https://us-central1-example-f1afa.cloudfunctions.net/getQuizById';
    
    this.http.get(`${functionUrl}?id=${id}`)
      .subscribe({
        next: (result) => console.log('获取到的Quiz数据:', result),
        error: (err) => console.error('请求失败:', err)
      });
  }
}

方案二：后端改成Firebase Callable函数 #

如果想继续用前端的httpsCallable调用，需要把后端的onRequest换成onCall（Callable函数专用触发器），参数会自动通过request.data传递：

修改后端代码：

const { logger, https } = require("firebase-functions");
const { onCall } = require("firebase-functions/v2/https");

// 替换原来的onRequest函数
exports.getQuizById = onCall({ cors: true }, async (request) => {
    const quizId = request.data.id; // Callable函数的参数存在request.data中

    if (!quizId) {
        throw new https.HttpsError('invalid-argument', 'Quiz ID is required');
    }

    try {
        const quizDocref = db.collection("quizzes").doc(quizId);
        const quizDoc = await quizDocref.get();

        if (!quizDoc.exists) {
            throw new https.HttpsError('not-found', `Quiz not found. ID: ${quizId}`);
        }

        return quizDoc.data();
    } catch (error) {
        logger.error("Error getting quiz document:", error);
        throw new https.HttpsError('internal', 'Internal Server Error');
    }
});

注意：Callable函数必须用https.HttpsError抛出错误，不能直接用response.send，这样前端才能正确捕获错误类型。

修改后端后，你原来的前端httpsCallable调用代码可以直接保留，不需要改动。

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