如何使Firebase异步函数返回的子节点数量正确赋值给对象的subtitle属性？

你遇到的核心问题是异步操作的执行顺序不匹配。Firebase 的 ref().once('value') 是异步方法——它的回调函数要等数据库请求完成后才会触发，但你的 getFB 函数是同步执行的：当你给 subtitle 赋值时，getFB 已经先返回了（此时返回的是 undefined，因为函数里没有同步返回值），而回调里的 num 要等后续数据库响应回来才会被赋值，这就导致 subtitle 拿不到正确数值，虽然控制台能打印出结果（那是回调执行时输出的）。

我们需要把异步操作的结果正确传递出来，这里推荐用 Promise 封装异步逻辑，再结合 async/await 或 Promise.all 来构建你的 menu 数组。

步骤1：重构getFB为返回Promise的函数 #

把原来的回调式异步改成Promise风格，让我们能等待它的执行结果：

function getFB(category) {
  // 返回一个Promise对象，用于传递异步结果
  return new Promise((resolve) => {
    firebase.database().ref(category).once('value', (snapshot) => {
      const num = snapshot.numChildren();
      console.log(num);
      resolve(num); // 将子节点数量作为结果传递出去
    });
  });
}

步骤2：用async/await初始化menu数组 #

因为await只能在async函数中使用，我们可以写一个异步函数来构建menu：

async function buildMenu() {
  // 等待每个getFB的执行结果，再构建对象
  const menu = [
    {
      title: 'category1',
      subtitle: await getFB('category1'),
    },
    {
      title: 'category2',
      // 注意：你原代码里这里写的是category1，应该是笔误，建议改成category2
      subtitle: await getFB('category2'),
    },
  ];
  return menu;
}

// 调用函数并使用最终的menu数组
buildMenu().then(menu => {
  console.log('最终的menu数组：', menu);
  // 在这里进行后续操作，比如页面渲染、数据处理等
});

进阶优化：用Promise.all并行请求 #

如果想同时发起所有数据库请求（提升效率），可以用Promise.all批量处理：

async function buildMenu() {
  // 并行发起所有请求，等待全部完成后获取结果
  const [count1, count2] = await Promise.all([
    getFB('category1'),
    getFB('category2'),
  ]);
  
  const menu = [
    { title: 'category1', subtitle: count1 },
    { title: 'category2', subtitle: count2 },
  ];
  
  return menu;
}

// 使用方式同上
buildMenu().then(menu => {
  // 处理menu数据
});

异步操作的结果无法同步赋值，必须等待异步任务完成后才能获取到正确值，所以所有依赖这个值的逻辑都要放在then或者await之后执行哦。

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