Flutter中如何将Firestore获取的数据存入列表？已尝试但列表为空

问题根源 #

Firestore查询数据是异步操作，你大概率是在数据还没返回的时候就去访问列表了，所以才会显示为空。

具体修复方案 #

1. 用async/await等待数据加载完成

把获取数据的逻辑包装成异步函数，等Firestore返回数据后再往列表里添加内容：

List<String> dropdownList = [];

// 异步获取Firestore数据
Future<void> getFirestoreData() async {
  var querySnapshot = await FirebaseFirestore.instance.collection('你的集合名称').get();
  // 遍历文档，把目标字段数据加入列表
  for (var doc in querySnapshot.docs) {
    dropdownList.add(doc['要获取的字段名'].toString());
  }
  // 若是在StatefulWidget中，调用setState刷新UI
  setState(() {});
}

// 在页面初始化时触发数据获取
@override
void initState() {
  super.initState();
  getFirestoreData();
}

2. 用FutureBuilder处理异步UI渲染

如果要直接在UI中构建下拉菜单，用FutureBuilder更稳妥，能自动处理加载、错误、数据完成三种状态：

FutureBuilder<QuerySnapshot>(
  future: FirebaseFirestore.instance.collection('你的集合名称').get(),
  builder: (ctx, snapshot) {
    // 加载中显示加载提示
    if (snapshot.connectionState == ConnectionState.waiting) {
      return const CircularProgressIndicator();
    }
    // 加载出错时显示错误信息
    if (snapshot.hasError) {
      return Text('加载失败：${snapshot.error}');
    }
    // 数据加载完成后构建下拉菜单
    return DropdownButton<String>(
      hint: const Text('请选择'),
      items: snapshot.data!.docs.map((doc) {
        return DropdownMenuItem(
          value: doc['要获取的字段名'].toString(),
          child: Text(doc['要获取的字段名'].toString()),
        );
      }).toList(),
      onChanged: (selectedValue) {
        // 处理选项选中后的逻辑
      },
    );
  },
)

额外检查点 #

• 核对Firestore的集合名、字段名是否拼写正确，字符错误会导致无法获取数据
• 检查Firestore安全规则，开发阶段可临时设置为allow read, write: if true;，确认是否是权限问题导致拿不到数据

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