React获取Firebase异步数据填充select下拉无显示问题排查

你的代码不生效的核心是异步逻辑处理错误：

1. getCoupeurs函数虽然标记了async，但内部getDocs是异步Promise请求，你没有等待请求完成就提前返回了空数组，调用方拿到的永远是空值
2. 即使后续请求完成往数组里push了数据，如果没有用框架的响应式状态（比如React的useState）存储数据，变量修改不会触发页面重渲染，下拉框自然不会显示选项。

你用静态模拟数据能跑通，就是因为静态数据不需要异步等待，不存在时序问题。

分两步修改：

1. 修正Firebase查询函数 #

去掉冗余的空数组声明和then回调，直接用await等待请求完成，返回格式化后的结果：

export async function getCoupeurs() {
  const coupeursRef = collection(db, "coupeurs");
  const snapshot = await getDocs(coupeursRef);
  return snapshot.docs.map(doc => ({
    value: doc.id,
    label: doc.data().nom
  }));
}

2. 组件中正确处理异步加载 #

以React组件为例，在组件挂载时触发数据请求，用响应式状态存储返回结果，加载过程中可以增加占位提示：

import { useState, useEffect } from "react";
import { getCoupeurs } from "@/api/firebase"; // 替换为你的方法实际引入路径

export default function SelectCoupeur() {
  const [coupeurs, setCoupeurs] = useState([]);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const loadCoupeurs = async () => {
      try {
        const data = await getCoupeurs();
        setCoupeurs(data);
      } catch (error) {
        console.error("获取数据失败:", error);
      } finally {
        setIsLoading(false);
      }
    };
    loadCoupeurs();
  }, []);

  if (isLoading) {
    return <select disabled><option>数据加载中...</option></select>;
  }

  return (
    <select>
      {coupeurs.map(coupeur => (
        <option key={coupeur.value} value={coupeur.value}>
          {coupeur.label}
        </option>
      ))}
    </select>
  );
}

• 不要在普通函数里声明空数组再通过异步回调push值的方式返回异步结果，这种写法无法保证返回时数据已经填充完成
• 异步获取的数据必须存在框架的响应式状态中，数据更新才能触发视图重渲染

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