Flutter应用读取Cloud Firestore数据时在模拟器加载页卡住

代码核心错误 #

你的MyHomePage组件中，StreamBuilder的逻辑存在关键问题：当snapshot.connectionState == ConnectionState.active（数据已就绪）时，你仅获取了QuerySnapshot对象，但没有返回渲染数据的Widget，代码最后无条件返回CircularProgressIndicator，导致页面始终停留在加载状态。

修复后的代码 #

将MyHomePage的相关代码修改为以下内容（重点调整StreamBuilder部分）：

class _MyHomePageState extends State<MyHomePage> {
  CollectionReference _referenceShoppingList = FirebaseFirestore.instance.collection('shopping_list');
  late Stream<QuerySnapshot> _streamShoppingItems;

  @override
  void initState() {
    super.initState();
    _streamShoppingItems = _referenceShoppingList.snapshots();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        actions: [
          IconButton(
            onPressed: () async {
              await GoogleSignIn().signOut();
              FirebaseAuth.instance.signOut();
            },
            icon: Icon(Icons.power_settings_new),
          )
        ],
      ),
      body: StreamBuilder<QuerySnapshot>(
        stream: _streamShoppingItems,
        builder: (BuildContext context, AsyncSnapshot snapshot) {
          // 处理错误状态
          if (snapshot.hasError) {
            return Center(child: Text('加载出错: ${snapshot.error}'));
          }

          // 处理加载中状态
          if (snapshot.connectionState == ConnectionState.waiting) {
            return Center(child: CircularProgressIndicator());
          }

          // 数据就绪，渲染列表
          QuerySnapshot querySnapshot = snapshot.data;
          List<QueryDocumentSnapshot> docs = querySnapshot.docs;

          // 根据你的文档结构转换数据，这里假设文档存储的是字符串字段（比如字段名为'item'）
          List<String> shoppingItems = docs.map((doc) => doc.get('item').toString()).toList();

          return ListView.builder(
            itemCount: shoppingItems.length,
            itemBuilder: (context, index) {
              return ListTile(title: Text(shoppingItems[index]));
            },
          );
        },
      ),
    );
  }
}

额外排查要点 #

• Firestore安全规则：确认规则允许已登录用户读取shopping_list集合，示例规则如下：

  rules_version = '2';
  service cloud.firestore {
    match /databases/{database}/documents {
      match /shopping_list/{doc} {
        allow read, write: if request.auth != null;
      }
    }
  }
  

• 字段名匹配：代码中读取的字段名要和Firestore文档中的字段名完全一致（大小写敏感）。
• 网络连接：确保模拟器/真机能正常访问Firebase服务，可尝试重启设备或切换网络。

内容的提问来源于stack exchange，提问作者Seçkin Kızılkaya