Flutter点击个人资料图标触发_CastError与NoSuchMethodError问题

错误原因分析 #

1. NoSuchMethodError（类'Type'无实例方法'[]'） #

• getData()函数逻辑混乱：重复初始化userRef，后续调用doc(userRef.id)时，userRef是集合引用对象，不存在id属性，导致获取错误文档；且首次获取文档后未返回数据，二次请求完全无效。
• buildprofileheader()中，当snapshot.hasData为false时，错误将userRef.parameters传入UserModel.fromMap，userRef是Firestore集合引用，parameters并非合法Map数据，调用map['userId']触发该错误。

2. _CastError（类型'Null'无法转换为'String'） #

• 强制通过as String将可空的user.Username转换为非空字符串，当Firestore中该字段为null或未获取到数据时，强制转换触发错误。

修复后的代码 #

Profile页面修复版 #

import 'package:cached_network_image/cached_network_image.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:yumor/models/progress.dart';
import 'package:yumor/models/user_model.dart';

class Profile extends StatefulWidget {
  const Profile({Key? key, required this.userProfile}) : super(key: key);
  final String? userProfile;

  @override
  State<Profile> createState() => _ProfileState();
}

class _ProfileState extends State<Profile> {
  final CollectionReference userRef = FirebaseFirestore.instance.collection('users');

  Future<UserModel?> getData() async {
    // 校验userProfile是否为空
    if (widget.userProfile == null) return null;
    
    final doc = await userRef.doc(widget.userProfile).get();
    if (doc.exists) {
      // 直接将文档数据转换为UserModel
      return UserModel.fromMap(doc.data()!);
    }
    return null;
  }

  late final Future<UserModel?> future = getData();

  Widget buildProfileHeader() {
    return FutureBuilder<UserModel?>(
      future: future,
      builder: (context, snapshot) {
        // 处理加载状态
        if (snapshot.connectionState == ConnectionState.waiting) {
          return const Center(child: CircularProgressIndicator());
        }
        
        // 处理错误状态
        if (snapshot.hasError) {
          return const Center(child: Text('加载失败，请稍后重试'));
        }
        
        // 处理无数据状态
        final user = snapshot.data;
        if (user == null) {
          return Padding(
            padding: const EdgeInsets.all(16.0),
            child: Column(
              children: const [
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Icon(Icons.account_circle, size: 90),
                  ],
                ),
                SizedBox(height: 12),
                Text(
                  '匿名用户',
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 16.0,
                  ),
                ),
              ],
            ),
          );
        }
        
        // 正常显示用户信息
        return Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  if (user.photoUrl != null)
                    CircleAvatar(
                      radius: 45,
                      backgroundImage: CachedNetworkImageProvider(user.photoUrl!),
                    )
                  else
                    const Icon(Icons.account_circle, size: 90),
                ],
              ),
              const SizedBox(height: 12),
              Text(
                user.username ?? '匿名用户',
                style: const TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 16.0,
                ),
              ),
            ],
          ),
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: const Text("Profile"),
      ),
      body: ListView(children: [buildProfileHeader()]),
    );
  }
}

UserModel优化版 #

import 'package:flutter/foundation.dart';

class UserModel {
  String? uid;
  String? username;
  String? email;
  String? photoUrl;

  UserModel({this.uid, this.email, this.username, this.photoUrl});

  // 从服务器接收数据，增加空安全处理
  factory UserModel.fromMap(Map<String, dynamic>? map) {
    // 处理map为空的情况
    map ??= {};
    return UserModel(
      uid: map['userId'],
      username: map['Username'],
      email: map['email'],
      photoUrl: map['photoUrl'],
    );
  }

  // 发送数据到firestore
  Map<String, dynamic> toMap() {
    return {
      'userId': uid,
      'Username': username,
      'email': email,
      'photoUrl': photoUrl,
    };
  }
}

额外优化点 #

• 修正类名、方法名命名，符合Dart语言规范（大驼峰类名、小驼峰方法名）。
• 增加加载状态提示、错误状态友好提示，替换原逻辑中错误的状态判断。
• 处理用户头像为空的边界情况，提供默认图标。
• 优化UserModel的fromMap方法，增加map为空的防御性处理。

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