Flutter中如何以列表形式展示Firestore中的数组数据

Firestore存储结构参考截图

前置准备 #

• 在pubspec.yaml中添加Firebase相关依赖，执行flutter pub get完成安装

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^latest_version
  cloud_firestore: ^latest_version

• 在项目入口完成Firebase初始化

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(const MyApp());
}

读取Firestore数组字段 #

Firestore中存储的数组类型在Dart侧会自动解析为List类型，可直接使用，支持两种读取模式：

1. 一次性读取 #

适合不需要实时更新数据的场景：

/// 替换集合名、文档ID、数组字段名为你项目中的实际配置
Future<List<dynamic>> fetchTargetArray() async {
  final documentSnapshot = await FirebaseFirestore.instance
      .collection('你的集合名称')
      .doc('目标文档ID')
      .get();

  if (documentSnapshot.exists) {
    // 读取指定数组字段，空值兜底返回空数组
    return documentSnapshot.data()?['你的数组字段名'] ?? [];
  }
  return [];
}

2. 实时监听读取 #

适合数组数据变更后需要自动同步刷新页面的场景：

Stream<DocumentSnapshot> listenTargetArray() {
  return FirebaseFirestore.instance
      .collection('你的集合名称')
      .doc('目标文档ID')
      .snapshots();
}

页面列表渲染 #

使用FutureBuilder/StreamBuilder对接数据，通过ListView完成列表渲染，以下是可直接参考的页面代码：

class ArrayListPage extends StatelessWidget {
  const ArrayListPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('数组数据列表')),
      // 对接一次性读取逻辑，实时场景替换为StreamBuilder即可
      body: FutureBuilder<List<dynamic>>(
        future: fetchTargetArray(),
        builder: (context, snapshot) {
          // 加载状态
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const Center(child: CircularProgressIndicator());
          }
          // 错误兜底
          if (snapshot.hasError) {
            return Center(child: Text('数据加载失败: ${snapshot.error}'));
          }
          // 空数据兜底
          final arrayData = snapshot.data ?? [];
          if (arrayData.isEmpty) {
            return const Center(child: Text('暂无列表数据'));
          }
          // 渲染列表
          return ListView.builder(
            padding: const EdgeInsets.all(16),
            itemCount: arrayData.length,
            itemBuilder: (context, index) {
              final item = arrayData[index];
              // 基础类型（字符串/数字）可直接渲染，Map/对象类型取对应字段展示即可
              return Card(
                child: ListTile(
                  title: Text(item.toString()),
                ),
              );
            },
          );
        },
      ),
    );
  }
}

注意事项 #

• Firestore单文档大小上限为1MB，如果数组长度过长（单条数据1KB的场景下超过1000条），不建议用数组存储，建议拆分到子集合实现
• 读取前确认Firebase控制台的安全规则配置正确，避免因无权限导致读取失败
• 如果数组元素是复杂对象，可在拿到数据后先做一层模型转换，不要直接在UI层调用toString()渲染

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