Flutter跳转商品详情页触发Null错误，尝试!与类型转换仍未解决

问题分析 #

出现Null错误的核心原因可能有两个：

• 跳转至详情页时未正确传递productId参数，导致ModalRoute.of(context)!.settings.arguments实际为null，强制转换为String时触发错误
• 通过firstWhere查找商品时，未找到匹配id的商品，该方法默认会抛出StateError而非返回null

修复步骤 #

1. 确保跳转时正确传递参数 #

检查触发跳转的代码，确认传递了有效的productId：

// 示例跳转代码（需替换为你的实际触发逻辑）
Navigator.pushNamed(
  context,
  ProductDetailsScreen.routeName,
  arguments: product.id, // 必须传递非空的String类型id
);

2. 安全获取路由参数 #

替换原有的强制转换逻辑，增加参数校验，避免null转换错误：

final productId = ModalRoute.of(context)?.settings.arguments;
// 校验参数类型是否为String，否则显示错误页面
if (productId is! String) {
  return Scaffold(
    body: Center(child: Text('参数错误，请返回重试')),
  );
}

3. 安全查找商品 #

使用firstWhereOrNull替代firstWhere（需导入collection包），避免找不到商品时抛出错误：
首先在pubspec.yaml中添加依赖：

dependencies:
  collection: ^1.18.0

然后修改代码：

import 'package:collection/collection.dart'; // 导入collection包

// ...

final loadedProduct = Provider.of<Products>(context)
    .items
    .firstWhereOrNull((prod) => prod.id == productId);

// 处理找不到商品的情况
if (loadedProduct == null) {
  return Scaffold(
    body: Center(child: Text('未找到指定商品')),
  );
}

完整修复后的代码 #

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:collection/collection.dart';

import '../providers/products.dart';

class ProductDetailsScreen extends StatelessWidget {
  static const routeName = '/product-detail';

  @override
  Widget build(BuildContext context) {
    final productId = ModalRoute.of(context)?.settings.arguments;
    
    // 参数校验
    if (productId is! String) {
      return Scaffold(
        body: Center(child: Text('参数错误，请返回重试')),
      );
    }

    // 安全查找商品
    final loadedProduct = Provider.of<Products>(context)
        .items
        .firstWhereOrNull((prod) => prod.id == productId);

    if (loadedProduct == null) {
      return Scaffold(
        body: Center(child: Text('未找到指定商品')),
      );
    }

    return Scaffold(
      appBar: AppBar(
        title: Text(loadedProduct.title),
      ),
    );
  }
}

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