Flutter中无法将Firestore获取的数据展示到UI的问题解决

1. 修复initState的拼写错误与递归调用 #

你的代码里把initState拼写成了iniState，还在方法内递归调用自身，这会导致无限循环，直接破坏页面初始化逻辑。修改如下：

@override
void initState() {
  super.initState(); // 必须调用父类的initState
  fetchRecords();
}

注意必须加上super.initState()，这是State类初始化的必要步骤。

2. 添加上下文错误捕获 #

Firebase请求可能因网络、权限等失败，添加try-catch可以快速定位问题：

fetchRecords() async {
  try {
    var records = await FirebaseFirestore.instance.collection('12words').get();
    mapRecords(records);
  } catch (e) {
    print('获取数据失败: $e'); // 打印错误信息到控制台
  }
}

3. 检查Model类与Firestore字段匹配 #

确保Model类的字段名、类型和Firestore集合12words中的文档完全一致：

• 比如Firestore文档里的字段是wordName和categoryName，Model类的对应字段也要同名且为String类型
• 确认Model类的构造函数正确，示例Model类代码应该类似：

class Words12 {
  final String id;
  final String wordName;
  final String categoryName;

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

4. 检查Firestore安全规则 #

如果是开发测试阶段，确保Firestore的安全规则允许读取数据，临时规则可以设置为：

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true; // 仅测试用，上线后要改为严格权限
    }
  }
}

上线后一定要修改为符合业务需求的权限规则，避免数据泄露。

5. 添加加载状态提示 #

初始加载时wordList为空，添加加载状态可以提升用户体验，修改build方法：

@override
Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.white,
    body: wordList.isEmpty 
        ? Center(child: CircularProgressIndicator()) // 加载中显示转圈
        : ListView.builder(
            itemCount: wordList.length,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text(wordList[index].wordName),
                subtitle: Text(wordList[index].categoryName),
              );
            },
          ),
  );
}

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