Firebase数据跨函数传递失败致Chart图表无法正常显示问题排查

兄弟，你的问题核心出在JavaScript异步操作的执行顺序上！Firebase的db.collection().doc().get()是异步请求，它不会阻塞代码执行——也就是说，你调用这三个get()之后，立刻就执行了runChart()，但这时候三个请求的回调（then里面的函数）还没跑完，a、b、c根本还没被赋值，所以runChart()里打印出来的自然都是undefined。

怎么修复？ #

我们需要等所有三个Firebase数据请求都完成之后，再调用runChart()。这里可以用Promise.all()来统一等待多个异步Promise完成，具体步骤如下：

1. 把每个Firebase的get()请求都转换成返回Promise的形式，让Promise.all()可以监听它们的完成状态
2. 等所有请求都成功返回后，再提取数据、调用runChart()

修改后的完整代码 #

function getFirebase() {
  // 把三个请求包装成Promise数组
  const fetchPromises = [
    db.collection('metas').doc('meta1097').get(),
    db.collection('metas').doc('meta1200').get(),
    db.collection('metas').doc('meta1440').get()
  ];

  // 等待所有请求完成
  Promise.all(fetchPromises)
    .then((docs) => {
      // 从返回的文档中提取数据
      const a = docs[0].get('jan');
      const b = docs[1].get('jan');
      const c = docs[2].get('jan');
      
      // 确认数据获取成功
      console.log('获取到的数据：', a, b, c);
      
      // 现在数据都准备好了，再调用渲染图表的函数
      runChart(a, b, c);
    })
    .catch((error) => {
      // 处理请求失败的情况
      console.error('获取数据出错：', error);
    });
}

function runChart(d, e, f) {
  console.log('runChart接收的数据：', d, e, f);
  var ctx = document.getElementById('myChart').getContext('2d');
  var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
      datasets: [{
        label: '# of Votes',
        data: [d, 19, 3, e, f, 3],
        backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)',
          'rgba(153, 102, 255, 0.2)',
          'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [
          'rgba(255, 99, 132, 1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
          'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        yAxes: [{ ticks: { beginAtZero: true } }]
      }
    }
  });
}

额外优化点 #

• 去掉了全局变量a、b、c，改成通过函数参数传递数据，避免全局变量污染
• 增加了错误捕获（catch），可以在请求失败时及时排查问题
• 代码逻辑更清晰，明确了“先获取所有数据，再渲染图表”的执行顺序

这样修改后，你就能确保runChart()在拿到完整的Firebase数据后才执行，图表也能正常显示数据啦！

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