Flutter应用出现NoSuchMethodError异常求助：无法加载Cloud Firestore图片

错误原因分析 #

你遇到的NoSuchMethodError源于错误地将函数当作Map直接访问：ourData.data['img']里的data是一个返回Map<String, dynamic>的闭包（函数），而非直接的Map对象，调用[]时自然会触发参数不匹配的错误。

修复方案 #

有两种简洁的修复方式：

方式1：调用data()方法获取数据Map #

将ourData.data['img']改为ourData.data()['img']，显式调用函数拿到数据Map后再访问字段：

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
  itemBuilder: (context, index) {
    var ourData = snapshot.data[index];
    return Card(
      elevation: 10.0,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
      child: ClipRRect(
        borderRadius: BorderRadius.circular(20),
        child: Image.network(ourData.data()['img'], fit: BoxFit.cover),
      ),
    );
  },
  itemCount: snapshot.data.length,
),

方式2：直接通过文档快照访问字段 #

QueryDocumentSnapshot支持直接用[]访问字段，无需调用data()，代码更简洁：

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
  itemBuilder: (context, index) {
    var ourData = snapshot.data[index];
    return Card(
      elevation: 10.0,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
      child: ClipRRect(
        borderRadius: BorderRadius.circular(20),
        child: Image.network(ourData['img'], fit: BoxFit.cover),
      ),
    );
  },
  itemCount: snapshot.data.length,
),

额外提示 #

请确认Firestore对应文档的img字段存储了有效的图片URL，同时确保Firestore的权限规则允许你的应用访问该文档资源，避免后续出现图片加载失败的问题。

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