Flutter Web部署后DropdownButtonFormField无法显示Firestore数据

本地调试时自定义下拉组件能正常显示Firestore中的值，但部署到Firebase Hosting后无法回显，以下是针对性的解决方法：

1. 移除自定义组件的本地状态维护 #

你的AppDropDownWidget自行维护了_value状态，可能在生产环境下状态同步出现延迟或失效。直接使用父组件传递的widget.value，让DropdownButtonFormField自身处理状态即可：

修改_AppDropDownWidgetState代码：

class _AppDropDownWidgetState<T> extends State<AppDropDownWidget<T>> {
  // 删除本地的_value变量和initState、didUpdateWidget方法

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 12),
      child: DropdownButtonFormField<T>(
        isDense: true,
        icon: widget.icon,
        hint: Text(
          widget.hintText,
          style: const TextStyle(
            color: Color(0xFF95A1AC),
          ),
        ),
        style: const TextStyle(
          color: Colors.black,
          fontSize: 14,
          fontWeight: FontWeight.normal,
        ),
        validator: widget.isValidate
            ? (T? value) {
                if (value == null) {
                  return "This field is required";
                } else if (value is String && (value).isEmpty) {
                  return "This field is required";
                } else {
                  return null;
                }
              }
            : null,
        value: widget.value, // 直接使用父组件传入的value
        items: widget.items,
        onChanged: (value) {
          FocusScope.of(context).requestFocus(FocusNode());
          widget.onChanged(value); // 直接传递选中值，无需本地维护状态
        },
        decoration: InputDecoration(
          isDense: true,
          labelText: widget.title,
          labelStyle: const TextStyle(color: Color(0xFF95A1AC)),
          border: OutlineInputBorder(
            borderSide: const BorderSide(color: Color(0xFFDBE2E7), width: 1),
            borderRadius: BorderRadius.circular(8),
          ),
          enabledBorder: OutlineInputBorder(
            borderSide: const BorderSide(color: Color(0xFFDBE2E7), width: 1),
            borderRadius: BorderRadius.circular(8),
          ),
          focusedBorder: OutlineInputBorder(
            borderSide: const BorderSide(color: Color(0xFFDBE2E7), width: 1),
            borderRadius: BorderRadius.circular(8),
          ),
          filled: true,
          fillColor: Colors.white,
        ),
      ),
    );
  }
}

2. 确保枚举类型的序列化/反序列化一致性 #

ScheduleTime枚举的解析可能在生产环境下出现实例不匹配问题，需要明确实现fromJson方法，保证从Firestore获取的数值能准确转换为枚举实例：

修改ScheduleTime枚举：

enum ScheduleTime {
  @JsonValue(0)
  daily('Daily'),
  @JsonValue(1)
  weekly('Weekly'),
  @JsonValue(2)
  monthly('Monthly');

  final String value;
  const ScheduleTime(this.value);

  // 实现从JSON值转换为枚举的方法
  static ScheduleTime fromJson(int jsonValue) {
    return switch(jsonValue) {
      0 => daily,
      1 => weekly,
      2 => monthly,
      _ => daily, // 默认值，避免解析错误
    };
  }
}

在Firestore服务的fetchOneFirestore方法中，使用该方法解析数据：

// 示例解析逻辑
ReportingScheduleModel.fromJson(Map<String, dynamic> json) {
  schedule = ScheduleTime.fromJson(json['schedule'] as int);
  day = json['day'] as int;
  // 其他字段解析...
}

3. 排查Firebase Hosting缓存问题 #

部署后可能缓存了旧代码或数据，可通过以下方式解决：

• 强制刷新浏览器（Ctrl+F5），清除本地缓存
• 在Firebase Hosting控制台的「规则」中，为HTML文件设置短缓存或不缓存，避免旧代码被加载

验证要点 #

• 确认从Firestore获取的_reportingSchedule字段值正确，可在_initState方法中添加打印语句，对比本地和部署后的输出
• 检查下拉组件的items列表中是否包含与widget.value匹配的项，确保枚举实例、字符串、数值的完全一致

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