Firebase Auth如何在Then代码块返回cred数据 React中Then返回值无法获取问题

问题根因 #

这是JavaScript异步编程的典型表现：Firebase函数调用返回的是Promise对象，then回调会在异步请求完成后才会触发执行，你在then内部return的内容只会作为返回值传递给Promise链的下一个回调，无法同步返回到外层的代码作用域中。

解决方案 #

方案1：在then回调内完成后续逻辑 #

所有依赖返回数据的操作，都放到then回调内部执行，示例代码如下：

const customFunction = firebase.functions().httpsCallable("你的自定义函数名");
customFunction({
  // 传入你的请求参数
  userId: "xxx",
  data: {}
}).then((res) => {
  const resData = res.data;
  // 在这里处理返回数据，比如更新React状态、调用后续处理逻辑
  setServerData(resData);
  handleData(resData);
}).catch((err) => {
  // 处理调用异常
  console.error("函数调用失败：", err);
})

方案2：用async/await语法简化调用（更推荐） #

用async/await语法可以把异步逻辑写得和同步代码逻辑一致，可读性更高，React中可配合useEffect、事件处理函数使用：

// 示例：在async函数中调用
const fetchFirebaseData = async () => {
  try {
    const customFunction = firebase.functions().httpsCallable("你的自定义函数名");
    const res = await customFunction({
      userId: "xxx",
      data: {}
    });
    const resData = res.data;
    // 直接使用返回数据
    setServerData(resData);
  } catch (err) {
    console.error("函数调用失败：", err);
  }
}

// 在需要调用的位置执行函数即可
fetchFirebaseData();

错误写法避坑 #

不要尝试用以下方式同步获取返回值，外层代码执行时then回调还未触发，永远拿不到正确结果：

// ❌ 错误示例
let result = null;
customFunction({}).then(res => {
  result = res.data;
})
console.log(result); // 输出为null

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