Firebase v9调用Callable Functions遇模块及函数未定义问题求助

一、解决模块解析失败错误 #

浏览器原生ES模块无法直接识别npm包名（如firebase/app），需通过Import Map配置CDN地址来解析模块：
在public/index.html的<head>中添加以下代码：

<script type="importmap">
  {
    "imports": {
      "firebase/app": "https://www.gstatic.com/firebasejs/9.23.0/firebase-app.js",
      "firebase/functions": "https://www.gstatic.com/firebasejs/9.23.0/firebase-functions.js"
    }
  }
</script>

配置后原script.js中的import语句即可正常解析。

二、解决"addName is not defined"错误 #

type="module"的脚本处于独立作用域，内部函数不会自动暴露到全局。两种解决方式：

1. 挂载到全局对象：修改script.js中的addName函数定义：

window.addName = function() {
  // 原addName函数逻辑
}

2. 使用事件监听（推荐）：给触发按钮添加id（如<button id="submit-btn">提交</button>），在script.js末尾添加：

document.getElementById('submit-btn').addEventListener('click', addName);

同时移除HTML中按钮的onclick="addName()"属性。

三、修复Callable Function调用语法错误 #

原代码中httpsCallable的调用方式错误，正确写法是直接使用导入的httpsCallable函数，而非functions实例的方法：
错误代码：

const fullName = functions.httpsCallable(functions, 'fullName');

修正为：

const fullName = httpsCallable(functions, 'fullName');

四、修复异步逻辑错误 #

fullName调用是异步操作，原代码中reception(data)在then外部执行时，data尚未获取，需将其移至then回调内：
修正后的异步调用逻辑：

fullName({firstName: _firstName, lastName: _lastName})
  .then((result) => {
    console.log(result);
    const data = result.data;
    reception(data); // 移至此处确保拿到返回数据
  }).catch((error) => {
    console.log(error);   
  })

同时修正reception函数的变量声明（避免全局变量污染）：

function reception(data){
  const output = document.getElementById("out");
  output.value = data.fullName;
}

五、完整修正代码示例 #

1. public/script.js #

import { initializeApp } from "firebase/app";
import { getFunctions, httpsCallable } from 'firebase/functions';

const firebaseConfig = {
  apiKey: "你的API_KEY",
  authDomain: "你的AUTH_DOMAIN",
  databaseURL: "你的DATABASE_URL",
  projectId: "你的PROJECT_ID",
  storageBucket: "你的STORAGE_BUCKET",
  messagingSenderId: "你的MESSAGING_SENDER_ID",
  appId: "你的APP_ID"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const functions = getFunctions(app);

function addName() {
  const _firstName = document.getElementById("fName").value;
  const _lastName = document.getElementById("lName").value;
  const fullName = httpsCallable(functions, 'fullName');
  
  fullName({firstName: _firstName, lastName: _lastName})
    .then((result) => {
      console.log(result);
      const data = result.data;
      reception(data);
    }).catch((error) => {
      console.log(error);   
    })
}

function reception(data){
  const output = document.getElementById("out");
  output.value = data.fullName;
}

// 绑定按钮点击事件（推荐方式）
document.getElementById('submit-btn').addEventListener('click', addName);

2. public/index.html关键部分 #

<head>
  <script type="importmap">
    {
      "imports": {
        "firebase/app": "https://www.gstatic.com/firebasejs/9.23.0/firebase-app.js",
        "firebase/functions": "https://www.gstatic.com/firebasejs/9.23.0/firebase-functions.js"
      }
    }
  </script>
</head>
<body>
  <input type="text" id="fName" placeholder="名">
  <input type="text" id="lName" placeholder="姓">
  <button id="submit-btn">生成全名</button>
  <input type="text" id="out" placeholder="结果">
  
  <script type="module" src="/script.js"></script>
</body>

最后注意事项 #

确保已部署Callable Function：在functions目录下执行命令：

firebase deploy --only functions

部署完成后再测试前端调用。

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