Flutter Firebase聊天应用报错：JsonDocumentSnapshot非UserModel子类型

问题根源 #

在chat.dart的FutureBuilder中，直接将Firestore返回的DocumentSnapshot对象（即snapshot.data）传递给Chatroom组件的userModel参数，但Chatroom要求的是UserModel类型实例，导致类型不匹配。

解决步骤 #

1. 导入UserModel类 #

在chat.dart顶部添加UserModel的导入语句：

import 'user_model.dart';

2. 将DocumentSnapshot转换为UserModel实例 #

修改chat.dart中FutureBuilder的builder代码，把Firestore文档数据转换成UserModel对象：

builder: (BuildContext context, AsyncSnapshot snapshot) {
  if (snapshot.hasData) {
    // 获取DocumentSnapshot并提取数据Map
    DocumentSnapshot docSnapshot = snapshot.data as DocumentSnapshot;
    Map<String, dynamic> userMap = docSnapshot.data() as Map<String, dynamic>;
    // 用fromMap构造函数创建UserModel实例
    UserModel friendModel = UserModel.fromMap(userMap);
    
    return ListTile(
      onTap:(){
        Navigator.push(context,
          MaterialPageRoute(
            builder: (context) =>
              Chatroom(
                userModel: friendModel, // 传递UserModel实例
                friendName: friendModel.name,
                friendEmail: friendModel.email,
                friendId: friendModel.uid,
              ),
          ),
        );
      },
      title: Text(friendModel.name),
      subtitle: Text(lastMessage),
      leading: Container(
        height: 45,
        width: 45,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(15),
          color: Colors.white
        ),
        child:const Center(
          child: Icon(Icons.person,color: Colors.grey,),
        ),
      ),
    );
  }
  return Container();
}

3. 代码说明 #

• snapshot.data是Firestore的DocumentSnapshot对象，需调用data()方法获取存储的键值对Map
• 通过UserModel.fromMap()构造函数，将Map数据转换成UserModel实例，满足Chatroom组件的参数类型要求
• 后续直接通过friendModel的属性获取用户信息，代码更简洁规范

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