Firebase Functions：httpsCallable返回null，httpsCallableFromURL正常问题排查

1. httpsCallable 返回 null，但 httpsCallableFromURL 正常工作 #

本地开发时，若未将 Functions 客户端指向模拟器端点，httpsCallable 默认会请求生产环境地址，而函数实际在本地模拟器运行，导致客户端无法正确接收响应。

解决方法：初始化 Functions 后，调用 connectFunctionsEmulator 连接本地模拟器，建议仅在开发环境启用：

import { Component } from '@angular/core';
import { getFunctions, httpsCallable, connectFunctionsEmulator } from "firebase/functions";
import { initializeApp } from 'firebase/app';
import { environment } from '../environments/environment';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  firebaseConfig = environment.firebaseConfig;
  firebaseApp = initializeApp(this.firebaseConfig);

  messageText: any;
  functions = getFunctions(this.firebaseApp);

  constructor() {
    // 仅开发环境连接模拟器
    if (!environment.production) {
      connectFunctionsEmulator(this.functions, "127.0.0.1", 5001);
    }
  }

  callMe(messageText: any) {
    console.log("Calling Cloud Function: " + messageText);
    const upperCaseMe = httpsCallable(this.functions, 'upperCaseMe');
    upperCaseMe({ text: messageText })
      .then((result) => {
        console.log(result.data)
      })
      .catch((error) => {
        console.error(error);
      });
  };
}

2. 获取模拟器中函数的调用URL #

有两种方式可获取：

• 启动模拟器时，控制台会直接输出每个函数的调用地址，格式为：http://127.0.0.1:5001/{你的项目ID}/{地区}/{函数名}
• 打开模拟器UI（默认地址 http://localhost:4000），进入Functions标签页，点击对应函数即可查看完整调用URL。

3. 含 setTimeout 的函数返回 null 且无日志输出 #

onCall 函数需要返回 Promise 来处理异步逻辑，原代码中 setTimeout 是异步操作，但函数本身未返回 Promise，导致函数执行完毕后直接返回 undefined，客户端收到 null，且异步块内的日志不会触发。

解决方法：将逻辑包裹在 Promise 中，等待异步操作完成后返回结果：

import * as functions from "firebase-functions";

export const upperCaseMe = functions.https.onCall((data, context) => {
  const original = data.text;
  const uppercase = original.toUpperCase();
  
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log("Wait ten seconds.");
      functions.logger.log('upperCaseMe', original, uppercase);
      resolve(uppercase);
    }, 10000);
  });
});

内容的提问来源于stack exchange，提问作者Thomas David Kehoe