如何解决Flutter中StreamBuilder渲染DataTable时的List<DataRow>类型匹配错误

• 核心问题是map方法没有显式指定泛型类型，Dart无法自动推导返回元素为DataRow类型，导致toList()最终生成的是List<dynamic>，和方法声明的List<DataRow>返回类型不匹配触发报错
• 代码还存在拼写错误：最后一行取值用的doctSnapshot多写了字母t，应为docSnapshot

修改两处代码即可解决问题：

1. 优化StreamBuilder泛型声明（可选，减少后续类型隐患） #

SizedBox(
  width: double.infinity,
  // 给StreamBuilder指定泛型，明确snapshot的数据类型
  child: StreamBuilder<QuerySnapshot>(
    stream: FirebaseFirestore.instance.collection('products').snapshots(),
    builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
      if (!snapshot.hasData) {
        return const Center(child: CircularProgressIndicator());
      }
      return DataTable(
        columns: const [
          DataColumn(label: Text("Id")),
          DataColumn(label: Text("Name")),
          DataColumn(label: Text("Category")),
          DataColumn(label: Text("Image")),
          DataColumn(label: Text("Original Price")),
          DataColumn(label: Text("Sale Price")),
          DataColumn(label: Text("Discount")),
          DataColumn(label: Text("Commission")),
          DataColumn(label: Text("Date")),
        ],
        rows: _listofRows(snapshot.data!),
      );
    },
  ),
)

2. 修复_listofRows方法的类型声明和拼写错误 #

List<DataRow> _listofRows(QuerySnapshot snapshot) {
  // 给map方法加<DataRow>泛型，明确返回的元素类型
  List<DataRow> newList = snapshot.docs.map<DataRow>((docSnapshot) {
    // 提前把文档数据转为Map类型，避免重复类型转换
    Map<String, dynamic> docData = docSnapshot.data() as Map<String, dynamic>;
    return DataRow(cells: <DataCell>[
      DataCell(Text(docData['ProductID'].toString())),
      DataCell(Text(docData['Product Name'].toString())),
      DataCell(Text(docData['Category Name'].toString())),
      DataCell(Text(docData['Product ImageUrl'].toString())),
      DataCell(Text(docData['originalPrice'].toString())),
      DataCell(Text(docData['salePrice'].toString())),
      DataCell(Text(docData['Discount'].toString())),
      DataCell(Text(docData['Commission Rate'].toString())),
      // 修正拼写错误的变量名
      DataCell(Text(docData['Out of Stock Date'].toString())),
    ]);
  }).toList();

  return newList;
}

内容的提问来源于stack exchange，提问作者Majid Ali Khan