Firebase Firestore异步数据获取：如何赋值全局变量或存入数组

我明白你现在遇到的问题——Firestore的异步特性让你在想要使用数据时，回调里的赋值操作还没执行完，导致直接打印place和speed得到的都是初始的null，而且就算赋值成功了，Flutter也不会自动更新UI对吧？这是处理异步数据时非常常见的坑，我来帮你解决这个问题。

先分析你现有代码的问题 #

你的displayData方法里用了.then()的异步回调，当你在方法外部直接执行print(place)时，Firestore的请求还在后台处理，回调里的赋值代码根本没运行，所以变量还是未初始化的状态。另外，就算后续赋值成功了，你也没有调用setState()通知Flutter状态发生变化，UI也不会更新显示最新的数据。

解决方案1：用async/await配合setState() #

这种方式让异步代码看起来更像同步代码，同时通过setState()触发UI更新，适合简单的页面内数据处理：

class _VehicleDetailsState extends State<VehicleDetails> { 
  // 给变量加上可空标记，避免未初始化的编译警告
  String? speed, place; 

  @override
  void initState() {
    super.initState();
    // 在组件初始化时调用数据获取方法
    displayData(); 
  }

  // 把方法改为异步方法
  Future<void> displayData() async { 
    QuerySnapshot value = await FirebaseFirestore.instance 
      .collection('Cars') 
      .where('id', isEqualTo: Routes.idCar) 
      .get(); 

    // 处理查询结果：因为是where查询，可能有多个文档，这里取第一个示例
    if (value.docs.isNotEmpty) {
      var result = value.docs.first;
      // 必须用setState包裹赋值操作，通知Flutter更新状态
      setState(() { 
        place = result.data()['place']; 
        speed = result.data()['speed']; 
      });
      // 这里打印就能拿到正确的数据了
      print(place);
      print(speed);
    } else {
      print('没有找到对应ID的车辆数据');
    }
  } 

  @override
  Widget build(BuildContext context) {
    // 根据变量状态显示不同UI：加载中/有数据
    return Scaffold(
      body: Center(
        child: (place != null && speed != null) 
          ? Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text('当前位置: $place'),
                Text('当前速度: $speed'),
              ],
            )
          : CircularProgressIndicator(), // 加载中的提示组件
      ),
    );
  }
}

解决方案2：用FutureBuilder（官方推荐） #

这是Flutter专门为异步数据展示设计的组件，不需要手动管理状态，代码更简洁易维护：

class _VehicleDetailsState extends State<VehicleDetails> { 
  // 把数据获取逻辑封装成一个Future
  Future<Map<String, String>?> fetchVehicleData() async { 
    QuerySnapshot value = await FirebaseFirestore.instance 
      .collection('Cars') 
      .where('id', isEqualTo: Routes.idCar) 
      .get(); 

    if (value.docs.isNotEmpty) {
      var result = value.docs.first;
      return {
        'place': result.data()['place'],
        'speed': result.data()['speed'],
      };
    }
    return null;
  } 

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder<Map<String, String>?>(
        future: fetchVehicleData(),
        builder: (context, snapshot) {
          // 根据异步请求的状态返回不同UI
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const CircularProgressIndicator();
          } else if (snapshot.hasError) {
            return Text('加载出错: ${snapshot.error}');
          } else if (!snapshot.hasData || snapshot.data == null) {
            return const Text('未找到对应车辆的数据');
          } else {
            var data = snapshot.data!;
            return Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text('当前位置: ${data['place']}'),
                  Text('当前速度: ${data['speed']}'),
                ],
              ),
            );
          }
        },
      ),
    );
  }
}

额外提醒 #

如果你的需求是把数据存入全局变量供多个页面使用，不建议直接在State里定义全局变量，更推荐使用Flutter的状态管理工具（比如Provider、Riverpod等）来统一管理数据，避免状态混乱。不过如果只是当前页面使用，上面两种方法完全足够。

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