使用Firebase Cloud Functions时提示httpsCallable未定义该如何解决

你遇到的httpsCallable is not defined错误核心原因是没有正确获取该方法，也没有完成Cloud Functions客户端的初始化，同时你早期v8版本还存在不同版本SDK混用的冲突问题。

你目前使用的v9 compat版本延续了v8的链式调用写法，按以下步骤修改即可：

1. 补全functions实例初始化，正确调用httpsCallable方法，修改后的完整script.js代码如下：

import firebase from "firebase/compat/app"
import 'firebase/compat/functions'
import 'firebase/compat/auth'
import 'firebase/compat/analytics'
import 'firebase/compat/database'

const firebaseConfig = {
    apiKey: "XXXXXXXXXXXX",
    authDomain: "XXXXX-XXXXX.firebaseapp.com",
    databaseURL: "https://XXXXX-XXXXX-default-rtdb.firebaseio.com",
    projectId: "XXXXX-XXXXX",
    storageBucket: "XXXXX-XXXXX.appspot.com",
    messagingSenderId: "XXXXXX",
    appId: "1:XXXXXX:web:XXXXXX"
  };
// Initialize Firebase
const app = firebase.initializeApp(firebaseConfig);
// 新增：初始化Cloud Functions客户端
const functions = firebase.functions();
// 原有其他初始化逻辑
firebase.auth().setPersistence(firebase.auth.Auth.Persistence.LOCAL)
firebase.analytics()

// 正确获取可调用云函数的方法
const testFunction = functions.httpsCallable('testFunction')

// 后续调用示例
testFunction({/* 传入参数 */})
  .then((result) => {
    // 处理返回结果
    console.log(result.data)
  })
  .catch((error) => {
    // 处理调用错误
    console.error(error)
  })

如果后续你不想用兼容模式，可以改用官方推荐的模块化写法，代码修改如下：

import { initializeApp } from "firebase/app";
import { getFunctions, httpsCallable } from "firebase/functions";
import { getAuth, setPersistence, browserLocalPersistence } from "firebase/auth";
import { getAnalytics } from "firebase/analytics";
import { getDatabase } from "firebase/database";

const firebaseConfig = {
    // 你的配置保持不变
};

// 初始化
const app = initializeApp(firebaseConfig);
const functions = getFunctions(app);
const auth = getAuth(app);
const analytics = getAnalytics(app);
const database = getDatabase(app);

// 配置auth持久化
setPersistence(auth, browserLocalPersistence)

// 获取云函数调用方法
const testFunction = httpsCallable(functions, 'testFunction')

你最初使用v8版本时的两个错误点：

• 同时引入了8.6.5和8.10.0两个版本的Firebase SDK，版本冲突会导致方法调用异常
• 没有初始化firebase.functions()实例，直接调用全局不存在的httpsCallable变量

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