Flutter使用datepicker选日期后查询Firestore数据报字段不存在错误

问题场景 #

开发日期选择器联动Firestore数据查询功能时，选中日期后触发上述报错，原有实现代码：

日期选择器组件原有代码 #

Container(
  child : TextField(
    decoration: InputDecoration( 
      prefixIcon: const Icon(Icons.calendar_today),
    ), 
    onTap: () => BottomPicker.dateTime( ),
    onSubmit: (value) {
      dateinput.text = '$value'; 
      var now = value ;
      print(now); 
    }, 
  ).show(context), 
),

数据查询展示组件原有代码 #

Container( 
  child: StreamBuilder<QuerySnapshot>(
    stream: db.collection("eye").where("time" , isGreaterThan: dateinput.text ).snapshots(),
    builder: (context, snapshot) {
      if (snapshot.data == null) {
        return Container(child: Center(child: Text("Loading...")));
      } else {
        List value = snapshot.data!.docs;
        return ListView.builder(
          scrollDirection: Axis.horizontal,
          itemCount: snapshot.data!.size,
          itemBuilder: (context, index) {
            var state= value[index]['state']; 
            print(state); 
            return Container(
              child: Text('$state'),
            );
          }
        ); 
      }
    },
  ) 
),

报错根因 #

• 组件逻辑错误：日期选择器的.show(context)被写在TextField组件位置，页面初始化就会自动弹窗；选值后没有调用setState刷新页面，查询条件不会随选中日期更新。
• 查询参数类型不匹配：直接把DateTime对象转成字符串作为查询条件，和Firestore中存储的Timestamp/DateTime类型的time字段做范围比较，会返回不符合预期的文档，甚至拉取到缺字段的历史脏数据。
• 字段读取无校验：直接通过value[index]['state']读取字段，只要返回的文档中不存在state字段，就会直接抛字段不存在的异常。
• 状态判断不全：只判断了snapshot.data是否为空，没有等待连接完成、没有处理空数据场景，首次加载时容易出现空指针。

修复方案 #

1. 修正日期选择器逻辑 #

在组件State类中定义变量存储选中的时间，将弹窗触发逻辑移到onTap回调中，选值后格式化时间并触发页面刷新：

//  State类中声明变量
DateTime selectedDate = DateTime.now();
final TextEditingController dateinput = TextEditingController();

// 修复后的选择器组件
Container(
  child: TextField(
    controller: dateinput,
    readOnly: true, // 禁止手动输入
    decoration: const InputDecoration(
      prefixIcon: Icon(Icons.calendar_today),
      hintText: "选择查询日期",
    ),
    onTap: () async {
      await BottomPicker.dateTime(
        onSubmit: (value) {
          setState(() {
            // 时间对齐到选中日期零点，方便按天查询
            selectedDate = DateTime(value.year, value.month, value.day);
            // 输入框展示格式化后的可读时间
            dateinput.text = "${selectedDate.year}-${selectedDate.month.toString().padLeft(2,'0')}-${selectedDate.day.toString().padLeft(2,'0')}";
          });
        },
      ).show(context);
    },
  ),
)

2. 修正查询逻辑与字段读取逻辑 #

查询参数传DateTime类型而非字符串，增加字段存在校验、补全加载/空数据/错误状态：

Container(
  child: StreamBuilder<QuerySnapshot>(
    // 注意：Firestore中time字段需存储为Timestamp类型，不要存字符串
    stream: FirebaseFirestore.instance
        .collection("eye")
        .where("time", isGreaterThanOrEqualTo: selectedDate)
        // 增加小于次日零点的条件，精准查询选中日期当天的所有数据
        .where("time", isLessThan: selectedDate.add(const Duration(days: 1)))
        .snapshots(),
    builder: (context, snapshot) {
      // 加载中状态
      if (snapshot.connectionState == ConnectionState.waiting) {
        return const Center(child: Text("Loading..."));
      }
      // 加载错误状态
      if (snapshot.hasError) {
        return Center(child: Text("加载失败: ${snapshot.error}"));
      }
      // 空数据状态
      final docs = snapshot.data?.docs ?? [];
      if (docs.isEmpty) {
        return const Center(child: Text("所选日期暂无数据"));
      }
      return ListView.builder(
        scrollDirection: Axis.horizontal,
        itemCount: docs.length,
        itemBuilder: (context, index) {
          final docData = docs[index].data() as Map<String, dynamic>;
          // 先判断字段存在再取值，避免字段不存在报错
          final state = docData.containsKey('state') ? docData['state'] : "无状态信息";
          return Container(
            padding: const EdgeInsets.symmetric(horizontal: 12),
            alignment: Alignment.center,
            child: Text("$state"),
          );
        },
      );
    },
  ),
)

排查提示 #

如果修复后仍报错，直接去Firestore控制台检查eye集合下的所有文档，确认不存在缺失time、state字段的历史脏数据，若存在补全对应字段即可。

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