Flutter FutureBuilder初始返回含key对象，状态变化后仅保留值的问题排查

核心问题原因 #

1. FutureBuilder的Future在build方法中重复创建：每次Widget重建时，build方法都会重新调用getDataSnapshot()发起新的Firebase请求，导致多异步请求并行执行。首次加载时可能先拿到缓存的旧数据（包含多余的datetimegroup键），热重载后请求完成才拿到正确的最新数据。
2. 数据解析逻辑未兼容格式差异：未对首次加载和后续状态变化返回的两种数据格式做统一处理，导致首次解析失败、热重载后报错的矛盾问题。

修复步骤 #

1. 将Future初始化移至initState，避免重复请求 #

把请求初始化放在initState中，确保整个组件生命周期只发起一次请求，避免缓存与实时数据冲突：

class _FormViewState extends State<FormView> {
  final DatabaseReference dbRef = FirebaseDatabase.instance.ref();
  late Future<dynamic> _dataFuture;

  @override
  void initState() {
    super.initState();
    _dataFuture = getDataSnapshot(); // 仅在组件初始化时发起请求
  }

  getDataSnapshot() async {
    try {
      final snapshot = await dbRef.child('child1').child('child2').child('datetimegroup').get();
      return snapshot.exists ? snapshot.value : null; // 直接返回节点数据，简化后续处理
    } catch (error) {
      return error;
    }
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: _dataFuture, // 使用预初始化的Future
      builder: (BuildContext context, AsyncSnapshot snapshot) {
        // 后续逻辑
      }
    );
  }
}

2. 统一数据解析逻辑，兼容两种格式 #

在解析数据时先判断格式，自动适配首次和热重载后的不同返回结果：

case ConnectionState.done:
  print(snapshot.data);
  Map<dynamic, dynamic> rawData;
  // 判断当前数据是否包含多余的datetimegroup外层键
  if (snapshot.data is Map && snapshot.data.containsKey('datetimegroup')) {
    rawData = snapshot.data['datetimegroup'] as Map<dynamic, dynamic>;
  } else {
    rawData = snapshot.data as Map<dynamic, dynamic>;
  }
  CUSTOMDATACLASS dataValue = CUSTOMDATACLASS.fromJson(rawData);
  // 渲染表单的逻辑
break;

3. 完善状态判断，增加加载与空数据处理 #

补充FutureBuilder的状态分支，避免无反馈的空白页面：

builder: (BuildContext context, AsyncSnapshot snapshot) {
  if (snapshot.hasError) {
    context.go("/error/${snapshot.error}");
    return SizedBox.shrink();
  }
  // 处理加载中或空数据状态
  if (!snapshot.hasData || snapshot.data == null) {
    return CircularProgressIndicator();
  }
  switch (snapshot.connectionState) {
    case ConnectionState.waiting:
      return CircularProgressIndicator();
    case ConnectionState.done:
      // 数据解析与表单渲染逻辑
      return YourReadOnlyForm(data: dataValue);
    default:
      return SizedBox.shrink();
  }
}

额外说明 #

Firebase Realtime Database的本地缓存机制可能返回旧数据，通过将请求固定在initState执行，能有效避免重复请求导致的数据格式混乱。直接返回snapshot.value而非整个DataSnapshot对象，也能减少不必要的数据层级处理。

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