Flutter Web使用cloud_firestore 3.1.0无法从Firebase Firestore拉取图片数据

问题修复方案 #

你代码里存在3处核心错误，按优先级修正即可：

• 第一处：FutureBuilder的状态判断逻辑写反，有数据时反而返回了文档不存在的提示，直接拦截了正常的列表渲染逻辑
• 第二处：已经通过withConverter指定了数据转换规则，获取文档数据时不需要再强转成Map，直接可以拿到ArtWork类型实例
• 第三处：你当前只把图片链接渲染成了文本组件，当然无法显示图片，需要替换为图片加载组件，另外Flutter Web默认存在跨域资源限制，如果加载第三方域名图片失败，可以在运行时添加--web-renderer html参数使用HTML渲染器规避。

修正后的代码

1. 模型类（无需修改）

class ArtWork {
  ArtWork({required this.name, required this.imgUrl});

  final String name;
  final String imgUrl;

  factory ArtWork.fromJson(Map<String, dynamic> json) => ArtWork(
    name: json['name'],
    imgUrl: json['imgUrl'],
  );

  Map<String, Object?> toJson() {
    return {
      'name': name,
      'imgUrl': imgUrl,
    };
  }
}

2. 页面逻辑修正

class ProfilePage extends StatefulWidget {
  final artRef = FirebaseFirestore.instance
      .collection('artWorks')
      .withConverter<ArtWork>(
    fromFirestore: (snapshots, _) => ArtWork.fromJson(snapshots.data()!),
    toFirestore: (artwork, _) => artwork.toJson(),
  );

  ProfilePage({Key? key}) : super(key: key);

  @override
  State<ProfilePage> createState() => _ProfilePageState();
}

class _ProfilePageState extends State<ProfilePage> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Padding(
        padding: const EdgeInsets.all(24.0),
        child: Card(child: _buildContent(context)),
      ),
    );
  }

  Widget _buildContent(BuildContext context) {
    return FutureBuilder<QuerySnapshot<ArtWork>>(
      future: widget.artRef.get(),
      builder: (BuildContext context, AsyncSnapshot<QuerySnapshot<ArtWork>> snapshot) {
        if (snapshot.hasError) {
          return const Text("加载出错");
        }

        if (snapshot.connectionState == ConnectionState.waiting) {
          return const Text("加载中");
        }

        // 逻辑修正：文档为空才提示不存在
        if (!snapshot.hasData || snapshot.data!.docs.isEmpty) {
          return const Text("文档不存在");
        }

        // 直接获取ArtWork实例，无需强转Map
        return ListView(
          shrinkWrap: true,
          children: snapshot.data!.docs.map((doc) {
            ArtWork art = doc.data();
            return ListTile(
              title: Text(art.name, style: const TextStyle(color: Colors.black,fontSize: 60),),
              // 替换为图片组件加载网络链接
              subtitle: Image.network(art.imgUrl),
            );
          }).toList(),
        );
      },
    );
  }
}

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