Flutter从Firestore取数据到Chips显示空数组，求解决方法

先排查基础问题 #

• 检查Firestore权限规则：开发阶段可临时开放读取权限（上线后务必改成严格规则），示例规则如下：

  rules_version = '2';
  service cloud.firestore {
    match /databases/{database}/documents {
      match /{document=**} {
        allow read, write: if true; // 仅开发环境使用，上线替换为身份验证逻辑
      }
    }
  }
  

• 确认集合名称拼写：代码中调用的集合名必须和Firestore控制台的“12words”完全一致，大小写、符号都不能错。

修正模型类与数据获取逻辑 #

1. 确保Words12模型类正确映射字段 #

模型类要能正确解析Firestore文档数据，增加空值判断避免崩溃：

class Words12 {
  final String wordName;
  final String categoryName;

  Words12({required this.wordName, required this.categoryName});

  // 从Firestore文档快照转换为模型对象
  factory Words12.fromFirestore(DocumentSnapshot doc) {
    Map<String, dynamic> data = doc.data() as Map<String, dynamic>;
    return Words12(
      wordName: data['wordName'] ?? '',
      categoryName: data['categoryName'] ?? '',
    );
  }
}

2. 正确实现异步数据获取与Chips展示 #

使用initState触发异步获取，结合setState更新UI，同时实现点击变色逻辑：

class ChipsScreen extends StatefulWidget {
  const ChipsScreen({super.key});

  @override
  State<ChipsScreen> createState() => _ChipsScreenState();
}

class _ChipsScreenState extends State<ChipsScreen> {
  List<Words12> wordsList = [];
  Set<String> selectedWords = {}; // 记录选中的词汇

  // 异步获取Firestore数据
  Future<void> fetchWords() async {
    try {
      QuerySnapshot querySnapshot = await FirebaseFirestore.instance.collection('12words').get();
      setState(() {
        wordsList = querySnapshot.docs.map((doc) => Words12.fromFirestore(doc)).toList();
      });
      print('获取到的词汇列表：${wordsList.map((e) => e.wordName).toList()}'); // 打印验证数据
    } catch (e) {
      print('数据获取失败：$e'); // 捕获错误便于排查
    }
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: wordsList.isEmpty 
          ? const Center(child: CircularProgressIndicator()) // 加载中状态
          : Wrap(
              spacing: 8.0,
              children: wordsList.map((word) {
                bool isSelected = selectedWords.contains(word.wordName);
                return ActionChip(
                  label: Text(word.wordName),
                  backgroundColor: isSelected ? Colors.blue : Colors.grey[200],
                  onPressed: () {
                    setState(() {
                      isSelected ? selectedWords.remove(word.wordName) : selectedWords.add(word.wordName);
                    });
                  },
                );
              }).toList(),
            ),
    );
  }
}

额外排查点 #

如果仍获取不到数据，检查以下内容：

• Flutter项目是否正确配置Firebase（google-services.json/GoogleService-Info.plist文件是否放置正确）。
• 设备是否有正常网络连接。
• Firestore控制台中“12words”集合是否存在有效文档，且文档包含wordName字段。

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