Flutter中StreamBuilder出现Null check operator空值错误的修复咨询

错误原因 #

你代码里直接用snapshot.data!做非空断言，但Stream刚启动加载时，snapshot.data还没拿到数据是null，这时候用!就会触发空值错误，等数据加载完就正常了，所以是短暂报错。

修复后的完整代码 #

Flexible(
  child: StreamBuilder(
    stream: ref.snapshots(),
    builder: (context, AsyncSnapshot<QuerySnapshot> snapshot) {
      // 处理错误状态
      if (snapshot.hasError) {
        return Center(
          child: Text("Error:${snapshot.error}"),
        );
      }

      // 处理加载状态：显示加载指示器
      if (snapshot.connectionState == ConnectionState.waiting) {
        return const Center(child: CircularProgressIndicator());
      }

      // 安全检查数据是否存在，避免空值访问
      final data = snapshot.data;
      if (data == null || data.docs.isEmpty) {
        return const Center(child: Text("暂无产品"));
      }

      return Scrollbar(
        child: GridView.builder(
          shrinkWrap: true,
          physics: const NeverScrollableScrollPhysics(),
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            mainAxisSpacing: 15,
            crossAxisSpacing: 15,
            childAspectRatio: 2/3,
          ),
          itemCount: data.docs.length,
          itemBuilder: (context, index) {
            final DocumentSnapshot documentSnapshot = data.docs[index];
            return Card(
              shape: BeveledRectangleBorder(
                borderRadius: BorderRadius.circular(15.0),
              ),
              elevation: 0,
              child: InkWell(
                onTap: () {
                  Navigator.push(context, PageTransition(
                    type: PageTransitionType.leftToRight,
                    child: DetailPage(
                      image: documentSnapshot['image'],
                      category: documentSnapshot['category'],
                      name: documentSnapshot['name'],
                      description: documentSnapshot['description'],
                      price: documentSnapshot['price'],
                    )
                  ));
                },
                child: Container(
                  margin: const EdgeInsets.only(left: 10.0, right: 10.0, top: 5.0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Ink.image(
                        image: NetworkImage(documentSnapshot['image'][0]),
                        height: 90,
                        width: double.infinity,
                      ),
                      const SizedBox(height: 5,),
                      RichText(
                        textAlign: TextAlign.start,
                        text: TextSpan(
                          text: documentSnapshot['category'],
                          style: const TextStyle(
                            color: Colors.black,
                            fontWeight: FontWeight.bold,
                            fontSize: 12.0
                          )
                        ),
                      ),
                      // 补充你原代码未完成的Column子组件
                    ],
                  ),
                ),
              ),
            );
          },
        ),
      );
    },
  ),
)

关键修复点 #

• 新增ConnectionState.waiting状态判断，加载时显示转圈指示器，避免在数据未就绪时访问snapshot.data
• 把snapshot.data!改成先赋值给data变量，再判断是否为null，彻底避免非空断言的风险
• 新增空数据处理，当没有产品时显示提示文本，提升用户体验

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