如何修复StreamBuilder中空值检查运算符的空值使用错误

报错追踪 #

======== Exception caught by widgets library =======================================================
The following _CastError was thrown building StreamBuilder<QuerySnapshot<Object?>>(dirty, dependencies: [MediaQuery], state: _StreamBuilderBaseState<QuerySnapshot<Object?>, AsyncSnapshot<QuerySnapshot<Object?>>>#9d300):
Null check operator used on a null value

The relevant error-causing widget was: 
  StreamBuilder<QuerySnapshot<Object?>> StreamBuilder:file:///Users/milansmac/Desktop/chaudhary_chicken_users_app/lib/widgets/category_widget.dart:20:14
When the exception was thrown, this was the stack: 
#0      _CategoryWidgetState.build.<anonymous closure> (package:chaudhary_chicken_users_app/widgets/category_widget.dart:53:49)
#1      StreamBuilder.build (package:flutter/src/widgets/async.dart:444:81)
#2      _StreamBuilderBaseState.build (package:flutter/src/widgets/async.dart:124:48)
#3      StatefulElement.build (package:flutter/src/widgets/framework.dart:4992:27)
#4      ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4878:15)
#5      StatefulElement.performRebuild (package:flutter/src/widgets/framework.dart:5050:11)
#6      Element.rebuild (package:flutter/src/widgets/framework.dart:4604:5)
#7      ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:4859:5)
#8      StatefulElement._firstBuild (package:flutter/src/widgets/framework.dart:5041:11)
#9      ComponentElement.mount (package:flutter/src/widgets/framework.dart:4853:5)
...     Normal element mounting (12 frames)
#21     Element.inflateWidget (package:flutter/src/widgets/framework.dart:3863:16)
#22     MultiChildRenderObjectElement.inflateWidget (package:flutter/src/widgets/framework.dart:6435:36)
====================================================================================================

代码示例 #

class CategoryWidget extends StatefulWidget {
  const CategoryWidget({Key? key}) : super(key: key);

  @override
  State<CategoryWidget> createState() => _CategoryWidgetState();
}

class _CategoryWidgetState extends State<CategoryWidget> {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: StreamBuilder<QuerySnapshot>(
        stream: FirebaseFirestore.instance
            .collection("sellers")
            .doc("5wzmKHapUiMGAtQHozRAsqYCZDk2")
            .collection("menus")
            .snapshots(),
        builder: (context, AsyncSnapshot<QuerySnapshot> snapshot) {
          if (snapshot.hasError) {
            return Center(child: circularProgress(),);
          } else {
            return SizedBox(
              height: 170,
              width: MediaQuery.of(context).size.width,
              child: Column(
                children: [
                  Row(
                    children: const [
                      Text('Categories', style: TextStyle(
                          color: Colors.black,
                          fontWeight: FontWeight.bold,
                          fontSize: 24
                        ),
                      ),
                    ],
                  ),
                  Expanded(
                    child: InkWell(
                      onTap: (){

                      },
                      splashColor: const Color(0xfffb9e5a),
                      child: ListView.builder(
                        scrollDirection: Axis.horizontal,
                        itemCount: snapshot.data!.docs.length,
                        itemBuilder: (BuildContext context, int index) {

                          Menus model = Menus.fromJson(snapshot.data!.docs[index].data()! as Map<String, dynamic>,);

                          return CategoriesDesign(
                            model: model,
                            context: context,
                          );
                          },
                      ),
                    ),
                  ),
                ],
              ),
            );
          }
          },
      ),
    );
  }
}

排查与修复方案 #

错误原因 #

报错栈指向代码第53行的空值检查运算符（!），核心问题是StreamBuilder状态处理不完整：

• StreamBuilder初始化或数据加载过程中，snapshot.connectionState处于waiting状态，此时snapshot.data为null
• 代码仅处理了snapshot.hasError的情况，未覆盖加载中、无数据的状态，直接访问snapshot.data!触发空值错误

修复步骤 #

1. 补充完整状态判断：在访问snapshot.data前，先判断加载中、无数据的状态，避免空值访问
2. 优化单文档数据处理：对单个文档的data()结果增加空值判断，防止单条数据为空导致的转换错误

修改后的代码 #

class CategoryWidget extends StatefulWidget {
  const CategoryWidget({Key? key}) : super(key: key);

  @override
  State<CategoryWidget> createState() => _CategoryWidgetState();
}

class _CategoryWidgetState extends State<CategoryWidget> {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: StreamBuilder<QuerySnapshot>(
        stream: FirebaseFirestore.instance
            .collection("sellers")
            .doc("5wzmKHapUiMGAtQHozRAsqYCZDk2")
            .collection("menus")
            .snapshots(),
        builder: (context, AsyncSnapshot<QuerySnapshot> snapshot) {
          // 处理错误状态
          if (snapshot.hasError) {
            return const Center(child: Text("加载出错"));
          }

          // 处理加载中状态
          if (snapshot.connectionState == ConnectionState.waiting) {
            return Center(child: circularProgress());
          }

          // 处理无数据状态
          if (!snapshot.hasData || snapshot.data!.docs.isEmpty) {
            return const Center(child: Text("暂无分类"));
          }

          // 有数据时正常渲染
          return SizedBox(
            height: 170,
            width: MediaQuery.of(context).size.width,
            child: Column(
              children: [
                const Row(
                  children: [
                    Text('Categories', style: TextStyle(
                        color: Colors.black,
                        fontWeight: FontWeight.bold,
                        fontSize: 24
                      ),
                    ),
                  ],
                ),
                Expanded(
                  child: InkWell(
                    onTap: () {},
                    splashColor: const Color(0xfffb9e5a),
                    child: ListView.builder(
                      scrollDirection: Axis.horizontal,
                      itemCount: snapshot.data!.docs.length,
                      itemBuilder: (BuildContext context, int index) {
                        // 单个文档数据为空时返回空组件
                        final docData = snapshot.data!.docs[index].data() as Map<String, dynamic>?;
                        if (docData == null) {
                          return const SizedBox.shrink();
                        }

                        Menus model = Menus.fromJson(docData);
                        return CategoriesDesign(
                          model: model,
                          context: context,
                        );
                      },
                    ),
                  ),
                ),
              ],
            ),
          );
        },
      ),
    );
  }
}

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