如何在选择指定日期时从Firestore加载下拉菜单的时段选项？

核心问题与修复步骤 #

1. Firestore查询未执行，数据获取失败 #

原代码仅构建了查询对象，但没有调用getDocs()执行查询，导致无法获取数据库中的时段数据。修复如下：

useEffect(() => {
  const fetchData = async () => {
    if (!date) return;
    
    // 构建查询条件
    const dateStr = date.toISOString().slice(0, 10);
    const q = query(
      timesRef,
      where("date", "==", dateStr),
      orderBy("time", "asc")
    );
    
    // 执行查询获取快照
    const querySnapshot = await getDocs(q);
    
    if (querySnapshot.empty) {
      setTimes([]);
      return;
    }
    
    // 提取时段数据（假设单日期对应单文档）
    const rawTimes = querySnapshot.docs[0].data().times;
    // 转换为Select组件兼容的格式（以react-select为例）
    const formattedTimes = rawTimes.map(time => ({
      value: time,
      label: time
    }));
    
    setTimes(formattedTimes);
  };
  
  fetchData();
}, [timesRef, date]);

2. 时段数据格式不匹配Select组件要求 #

如果使用的是react-select，它要求options是包含value和label的对象数组，而非纯字符串数组。上面的代码已完成格式转换，确保下拉菜单能正确渲染选项。

3. 初始化时段数据的逻辑限制过严 #

原代码仅在周一启动时生成未来两周的时段，非周一启动时数据库无数据，导致下拉菜单为空。调整逻辑，跳过已存在的日期，确保每次启动都能补全缺失的时段：

const addTimesForNextThreeWeeks = async () => {
  let currentDate = new Date();
  const baseTimes = ["09:00", "10:00", "11:00"];
  
  // 获取已存在的日期，避免重复添加
  const existingSnapshot = await getDocs(timesRef);
  const existingDates = new Set(existingSnapshot.docs.map(doc => doc.data().date));
  
  // 生成未来14天的时段
  for (let i = 0; i < 14; i++) {
    const dateStr = currentDate.toISOString().slice(0, 10);
    if (!existingDates.has(dateStr)) {
      await addDoc(timesRef, {
        date: dateStr,
        times: baseTimes
      });
    }
    currentDate.setDate(currentDate.getDate() + 1);
  }
};

4. 调试建议 #

• 在fetchData中添加日志，验证查询结果：

  console.log("查询日期:", dateStr);
  console.log("查询到的文档数:", querySnapshot.size);
  

• 检查Firestore集合30min-goalie-semiprivate-times的文档结构，确保每个文档包含date（格式如YYYY-MM-DD）和times（字符串数组）字段。

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