Firebase Firestore按timestamp查询指定区间无返回文档如何解决

核心原因 #

• 类型不匹配：你第一次查询传入的是dayjs.valueOf()返回的毫秒级数字时间戳，但Firestore中startTime是原生Timestamp类型，Firestore不会自动做跨类型匹配，因此范围查询返回空。
• 复合索引缺失：你同时使用了studio.ID的等值查询和startTime的范围查询，这种跨字段的复合查询需要提前创建对应复合索引，如果未创建索引也会导致查询失败。
• 代码逻辑小问题：你原来的写法在forEach中循环调用setBookings，会反复覆盖状态，最后只会保留最后一条查询到的文档数据。
• 时区偏差：你初始化日期时设置的是客户端本地时区的零点，如果Firestore中存储的Timestamp是UTC时区的，会出现时间范围错位，导致查询不到结果。

正确实现方式 #

优先使用Firestore官方提供的Timestamp类做类型转换，保证查询值和存储值类型完全一致：

// 先引入Firebase的Timestamp工具类
import { Timestamp } from 'firebase/firestore';

const [date, setDate] = useState(new Date(new Date().setHours(0, 0, 0, 0)));
const [step, setStep] = useState(0);
const [alert, setAlert] = useState(false);
const [bookings, setBookings] = useState([]); // 建议用数组存储多条预约数据
const [loading, setLoading] = useState(false);

const bookingWindowAllowed = 7;

useEffect(() => {
    setLoading(true);
    // 统一用UTC时区避免偏差，也可以根据业务需求用本地时区
    const startOfDay = dayjs(date).startOf('day').toDate();
    const endOfDay = dayjs(date).add(1, 'day').startOf('day').toDate();
    // 转换为Firestore Timestamp类型
    const startTimestamp = Timestamp.fromDate(startOfDay);
    const endTimestamp = Timestamp.fromDate(endOfDay);

    firestore
        .collection('bookings')
        .where('studio.ID', '==', 'kM8p1jSenI4M0Mr1PzBo')
        .where('startTime', '>=', startTimestamp)
        .where('startTime', '<', endTimestamp)
        .get()
        .then((querySnapshot) => {
            const result = [];
            querySnapshot.forEach((doc) => {
                result.push(doc.data());
            });
            // 统一赋值避免覆盖
            setBookings(result);
            setLoading(false);
        })
        .catch((error) => {
            console.log('查询错误: ', error);
            setLoading(false);
        });
}, [date]);

额外排查步骤 #

如果修改后还是查询不到，可按以下顺序排查：

1. 打开浏览器控制台查看是否有索引缺失的报错，如果有，直接按照报错提示创建对应复合索引，等待索引生效后再测试
2. 打印startTimestamp和endTimestamp的实际值，和Firestore中存储的startTime值做比对，确认时间范围确实覆盖了目标文档的时间

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