调用Firebase云函数报Cannot read property 'httpsCallable' of undefined如何解决

错误根因 #

你项目中firebase.js的functions导出逻辑存在语法错误：useEmulator()是Firebase Functions实例的无返回值配置方法，你直接将该方法的调用结果赋值给functions变量，当dev = true时，functions最终会被赋值为undefined，调用httpsCallable自然会抛出找不到属性的报错。

修复方案 #

修改firebase.js中functions的导出逻辑：先获取functions实例，单独调用useEmulator配置模拟器后再导出实例：

// 替换firebase.js中原来导出functions的代码段
const fbFunctions = app.functions()
if (dev) {
  fbFunctions.useEmulator("localhost", 5001)
}
export const functions = fbFunctions

其他优化建议 #

• useEmulator的端口参数规范为数字类型，无需传字符串格式的'5001'，避免潜在的适配问题
• checkout.js中调用云函数时建议加上await和异常捕获，避免未处理的Promise报错：

const handleFreeOrder = async () => {
  const createFreeOrder = functions.httpsCallable('createFreeOrder')
  try {
    await createFreeOrder(cart.products)
    // 可补充下单成功后的业务逻辑
  } catch (err) {
    // 可补充错误提示等异常处理逻辑
  }
}

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