Flutter中snapshot.data!['username']报[]运算符未定义错误解决

cloud_firestore 2.0+版本做了类型安全升级：

• 旧版本文档快照的返回数据默认是dynamic动态类型，支持直接用[]操作符读取字段
• 新版本下你代码中FutureBuilder显式声明了泛型为Object，而Object类型未定义下标操作符，直接调用会抛出对应错误
• 即使将泛型改为dynamic，也不能直接在DocumentSnapshot对象上调用[]操作符，必须通过内置的data()方法取出文档存储的字段Map后，才能读取对应字段值

• 修改FutureBuilder的泛型声明，指定为Firestore文档快照对应的正确类型DocumentSnapshot<Map<String, dynamic>>
• 补充快照异常、空数据状态判断，避免请求失败时的空指针崩溃
• 调用文档快照的data()方法获取存储的字段Map，再读取username字段，可补充空值兜底

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';

class MessageBubble extends StatelessWidget {
  MessageBubble(
    this.message,
    this.userId,
    this.isMe, {
    Key? key,
  }) : super(key: key);

  final String message;
  final String userId;
  final bool isMe;

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: isMe ? MainAxisAlignment.end : MainAxisAlignment.start,
      children: [
        Container(
          decoration: BoxDecoration(
            color: isMe
                ? Color.fromARGB(210, 23, 163, 13)
                : Color.fromARGB(255, 0, 36, 66),
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(12),
              topRight: Radius.circular(12),
              bottomLeft: !isMe ? Radius.circular(0) : Radius.circular(12),
              bottomRight: !isMe ? Radius.circular(12) : Radius.circular(0),
            ),
          ),
          width: 140,
          padding: EdgeInsets.symmetric(
            vertical: 10,
            horizontal: 16,
          ),
          margin: EdgeInsets.symmetric(vertical: 4, horizontal: 8),
          child: Column(
            children: [
              // 指定正确的Future泛型类型
              FutureBuilder<DocumentSnapshot<Map<String, dynamic>>>(
                  future: FirebaseFirestore.instance
                      .collection('users')
                      .doc(userId)
                      .get(),
                  builder: (context, snapshot) {
                    // 加载状态
                    if (snapshot.connectionState == ConnectionState.waiting) {
                      return Text('Loading...');
                    }
                    // 错误、空数据状态兜底
                    if (snapshot.hasError || !snapshot.hasData) {
                      return Text('Unknown');
                    }
                    // 取出文档存储的字段Map
                    final userData = snapshot.data!.data() ?? <String, dynamic>{};
                    return Text(
                      // 从Map中读取username字段，增加空值兜底
                      userData['username'] ?? 'Unknown',
                      style: TextStyle(fontWeight: FontWeight.bold),
                    );
                  }),
              Text(
                message,
                style: TextStyle(color: Colors.orange),
              ),
            ],
          ),
        ),
      ],
    );
  }
}

如果你不想修改FutureBuilder的泛型声明，也可以在读取字段前对snapshot.data做强制类型转换，效果一致：

final snapshotData = snapshot.data! as DocumentSnapshot<Map<String, dynamic>>;
final userData = snapshotData.data() ?? <String, dynamic>{};

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