调用Firebase异步方法后，如何在Flutter Text组件正确显示数值？

核心错误：FutureBuilder中错误引用Future方法 #

你在FutureBuilder的builder回调里直接写了'$getTotalAmount()'，这会把函数本身的字符串表示（即Closure: () => Future）拼接到文本中，而非Future执行完成后返回的整数结果。

正确做法是使用AsyncSnapshot提供的data属性，也就是snapshot.data，这才是getTotalAmount()异步执行完成后返回的金额数值：

return MyTextWidget(
  text: '${snapshot.data}',
  isTitle: true,
  textSize: 40,
);

额外需要修复的问题 #

除了上述直接错误，你的getUserAmount()方法还存在两处严重问题：

1. 递归调用未等待，导致金额累加不完整
   原代码中递归调用getUserAmount()时未加await，会导致方法提前返回，后续的累加操作无法等待递归完成，最终返回的金额不完整。建议用循环替代递归，同时避免全局变量i带来的状态污染：

   Future<int> getUserAmount() async {
     int amount = 0; // 使用局部变量存储累加结果
     // 遍历所有用户ID，替代递归逻辑
     for (var userId in userIds) {
       final userRef = FirebaseFirestore.instance
           .collection('usersData')
           .doc(userId)
           .collection('entries');
   
       final querySnapshot = await userRef.get();
   
       for (var doc in querySnapshot.docs) {
         final docData = doc.data();
         final docAmount = docData['amount'] as int;
         amount += docAmount;
       }
     }
     print('amount is $amount');
     return amount;
   }
   

2. getTotalAmount()方法缺少返回语句
   原代码中getTotalAmount()未编写返回语句，会导致编译错误，补充完整：

   Future<int> getTotalAmount() async {
     User user = User();
     final amount = await user.getUserAmount();
     return amount;
   }
   

最终修正后的FutureBuilder代码 #

FutureBuilder<int>(
  future: getTotalAmount(),
  builder: (BuildContext context, AsyncSnapshot<int> snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return const CircularProgressIndicator();
    } else if (snapshot.hasError) {
      return Text('Error: ${snapshot.error}');
    } else {
      return MyTextWidget(
        text: '${snapshot.data ?? 0}', // 用??0处理data为空的边界情况
        isTitle: true,
        textSize: 40,
      );
    }
  },
),

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