Flutter中如何将FirebaseFirestore嵌套Map的QuerySnapshot转为表格？

1. 定义Customer实体类 #

先创建实体类，自动将Firestore文档快照转换为对象，重点处理linked_users嵌套Map：

class Customer {
  final String id;
  // 按需添加其他业务字段，比如客户名称、创建时间等
  final Map<String, dynamic> linkedUsers; // 键为邮箱，值为对应用户信息

  Customer({
    required this.id,
    required this.linkedUsers,
    // 其他字段的构造参数
  });

  // 从Firestore文档快照生成Customer对象
  factory Customer.fromDocumentSnapshot(DocumentSnapshot doc) {
    final data = doc.data() as Map<String, dynamic>;
    return Customer(
      id: doc.id,
      linkedUsers: data['linked_users'] as Map<String, dynamic>? ?? {},
      // 其他字段赋值，比如 name: data['customer_name'] ?? ''
    );
  }
}

2. 获取Firestore实时数据流 #

编写方法将Firestore的集合快照流转换为Customer对象列表流：

Stream<List<Customer>> getCustomersStream() {
  return FirebaseFirestore.instance
      .collection('customers')
      .snapshots()
      .map((querySnapshot) {
    return querySnapshot.docs
        .map((doc) => Customer.fromDocumentSnapshot(doc))
        .toList();
  });
}

3. 用StreamBuilder构建表格展示 #

在UI中通过StreamBuilder监听数据流，遍历linked_users生成表格（这里用Flutter原生DataTable组件）：

方式1：合并所有关联用户展示 #

StreamBuilder<List<Customer>>(
  stream: getCustomersStream(),
  builder: (context, snapshot) {
    // 加载状态处理
    if (snapshot.connectionState == ConnectionState.waiting) {
      return const Center(child: CircularProgressIndicator());
    }

    // 错误状态处理
    if (snapshot.hasError) {
      return Center(child: Text('加载失败: ${snapshot.error}'));
    }

    final customers = snapshot.data ?? [];
    if (customers.isEmpty) {
      return const Center(child: Text('暂无客户数据'));
    }

    // 收集所有客户的关联用户条目
    final allLinkedUsers = <MapEntry<String, dynamic>>[];
    for (final customer in customers) {
      allLinkedUsers.addAll(customer.linkedUsers.entries);
    }

    // 横向滚动表格适配多列
    return SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: DataTable(
        columns: const [
          DataColumn(label: Text('关联邮箱')),
          DataColumn(label: Text('用户姓名')),
          DataColumn(label: Text('联系电话')),
        ],
        rows: allLinkedUsers.map((entry) {
          final userData = entry.value;
          return DataRow(cells: [
            DataCell(Text(entry.key)),
            DataCell(Text(userData['name'] ?? '未填写')),
            DataCell(Text(userData['phone'] ?? '未填写')),
          ]);
        }).toList(),
      ),
    );
  },
)

方式2：按客户分组展开展示 #

如果需要按单个客户分组查看关联用户，可结合ExpansionTile实现：

StreamBuilder<List<Customer>>(
  stream: getCustomersStream(),
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return const Center(child: CircularProgressIndicator());
    }

    if (snapshot.hasError) {
      return Center(child: Text('加载失败: ${snapshot.error}'));
    }

    final customers = snapshot.data ?? [];
    if (customers.isEmpty) {
      return const Center(child: Text('暂无客户数据'));
    }

    return ListView.builder(
      itemCount: customers.length,
      itemBuilder: (context, index) {
        final customer = customers[index];
        return ExpansionTile(
          title: Text('客户ID: ${customer.id}'), // 替换为客户名称等业务字段
          children: [
            SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              child: DataTable(
                columns: const [
                  DataColumn(label: Text('关联邮箱')),
                  DataColumn(label: Text('用户姓名')),
                  DataColumn(label: Text('联系电话')),
                ],
                rows: customer.linkedUsers.entries.map((entry) {
                  final userData = entry.value;
                  return DataRow(cells: [
                    DataCell(Text(entry.key)),
                    DataCell(Text(userData['name'] ?? '未填写')),
                    DataCell(Text(userData['phone'] ?? '未填写')),
                  ]);
                }).toList(),
              ),
            ),
          ],
        );
      },
    );
  },
)

关键注意事项 #

• 确保Firestore中linked_users的类型为Map，若为数组需修改实体类中对应字段为List
• 空值处理：对Firestore可能不存在的字段添加??设置默认值，避免空指针异常
• 表格适配：用SingleChildScrollView包裹表格并设置横向滚动，避免列过多超出屏幕

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