Flutter获取Firebase Storage图片时ClientException类型不匹配问题求助

在Flutter项目中从Firebase Storage获取图片并转为Uint8List存入ArticleModel时，抛出错误：Instance of 'ClientException': type 'ClientException' is not a subtype of type 'JavaScriptObject'。移除try-catch后程序能正常运行，但官方文档的方法无法解决该问题。

相关代码 #

getArticles() 方法

Future<void> getArticles() async {
    final QuerySnapshot querySnapshot = await collectionReference.get();
    final articles = <ArticleModel>[];

    for (final doc in querySnapshot.docs) {
      final data = doc.data() as Map<String, dynamic>;

      final downloadRef = storageRef.child('article_images/${data['dateTime']}.jpg');

      try {
        image = await downloadRef.getData();
        print('image assigned');
        print(image);
      } catch (e) {
        print(e);
      }

      final article = ArticleModel(
        dateTime: data['dateTime'],
        image: image,
        title: data['title'],
        description: data['description'],
        userId: FirebaseAuth.instance.currentUser!.uid,
        docId: doc.id,
      );
      articles.add(article);
    }

    ArticleProvider.articles = articles;
    print('data assigned');
  }

ArticleModel 类

import 'package:flutter/foundation.dart';

class ArticleModel {
  String title;
  String description;
  Uint8List? image;
  String userId;
  String? docId;
  String dateTime;

  ArticleModel({required this.title, required this.description, this.image, required this.userId,  this.docId, required this.dateTime});

  Map<String,dynamic> toMap() {
    return {
      'title': title,
      'description': description,
      'userId': userId,
      'dateTime': dateTime,
    };
  }

  static ArticleModel fromMap(Map<String, dynamic> article) {
    return ArticleModel(title: article['title'], description: article['description'], userId: article['userId'], docId: article['docId'], dateTime: article['dateTime']);
  }

}

解决方案 #

1. 精准捕获异常类型，避免类型不匹配

原代码的catch(e)会捕获所有异常，可能导致非预期的类型转换问题。改为精准捕获Firebase和网络相关异常，并在出错时将image设为null，避免影响后续对象创建：

try {
  image = await downloadRef.getData();
  print('image assigned');
  print(image);
} on FirebaseException catch (e) {
  print('Firebase存储错误: ${e.message}');
  image = null;
} on ClientException catch (e) {
  print('网络请求错误: ${e.message}');
  image = null;
} catch (e) {
  print('其他未知错误: $e');
  image = null;
}

2. 调整image变量作用域，避免循环污染

将image变量的声明移至循环内部，确保每次处理文档时都是全新的变量，避免上一次循环的异常状态残留：

for (final doc in querySnapshot.docs) {
  final data = doc.data() as Map<String, dynamic>;
  Uint8List? image; // 移至循环内部，每次循环初始化

  final downloadRef = storageRef.child('article_images/${data['dateTime']}.jpg');

  // 异常捕获和对象创建代码不变
}

3. 替代方案：通过下载链接获取图片（适合Web平台）

如果是Flutter Web环境，getData()可能存在平台兼容性问题，可先获取下载链接，再通过http库下载转为Uint8List：

import 'package:http/http.dart' as http;

// 替换原try块内容
try {
  final url = await downloadRef.getDownloadURL();
  final response = await http.get(Uri.parse(url));
  if (response.statusCode == 200) {
    image = response.bodyBytes;
    print('image assigned');
    print(image);
  } else {
    image = null;
    print('图片下载失败，状态码: ${response.statusCode}');
  }
} catch (e) {
  print('获取图片错误: $e');
  image = null;
}

4. 验证存储路径与文件存在性

确认article_images/${data['dateTime']}.jpg路径下存在对应图片，检查dateTime的格式是否与上传时完全一致，避免因路径错误触发异常。

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