Flutter GoRoute子路由传参报错：String无法转为UserAccount?

问题根源 #

GoRouter在导航到子路由时，父路由的pageBuilder会重新执行，且子路由传入的extra会覆盖父路由上下文的extra参数。你跳转时传入的是String类型的uid，父路由尝试将这个String转为UserAccount?，自然触发类型转换错误。

解决方案（推荐方案：使用路径参数传递子路由参数） #

extra适合传递路由树共享的全局/父级状态，子路由的独立参数建议用路径参数或查询参数，避免与父路由的extra冲突。

1. 修改路由树定义，给子路由添加路径参数占位符：

GoRoute(
  name: ChatScreen.routeName,
  path: ChatScreen.routeName,
  pageBuilder: (context, state) {
    UserAccount? arguments = state.extra as UserAccount?;
    return slideTransition(
      context,
      state,
      ChatScreen(userAccount: arguments),
    );
  },
  routes: [
    GoRoute(
      name: "other_profile_from_chat",
      path: "other-profile/:uid", // 新增路径参数占位符
      pageBuilder: (context, state) {
        // 从pathParameters中提取uid
        String accountUid = state.pathParameters['uid']!;
        return slideTransition(
          context,
          state,
          OtherProfilePageTestFuture(accountUID: accountUid),
        );
      },
    ),
  ],
)

2. 修改跳转代码，通过pathParameters传递参数：

onPressed: () {
  context.goNamed(
    "other_profile_from_chat",
    pathParameters: {'uid': userAccount!.uid},
  );
}

备选方案（用复合对象传递extra，不推荐） #

如果必须使用extra，可以定义一个复合对象同时包含父路由和子路由需要的参数，避免覆盖冲突：

1. 定义复合参数类：

class ChatRouteExtra {
  final UserAccount userAccount;
  final String childUid;

  ChatRouteExtra({required this.userAccount, required this.childUid});
}

2. 修改路由树的pageBuilder：

GoRoute(
  name: ChatScreen.routeName,
  path: ChatScreen.routeName,
  pageBuilder: (context, state) {
    ChatRouteExtra? extra = state.extra as ChatRouteExtra?;
    return slideTransition(
      context,
      state,
      ChatScreen(userAccount: extra?.userAccount),
    );
  },
  routes: [
    GoRoute(
      name: OtherProfilePageTestFuture.routeName + "_from_chat",
      path: OtherProfilePageTestFuture.routeName + "_from_chat",
      pageBuilder: (context, state) {
        ChatRouteExtra? extra = state.extra as ChatRouteExtra?;
        String accountUid = extra?.childUid ?? '';
        return slideTransition(
          context,
          state,
          OtherProfilePageTestFuture(accountUID: accountUid),
        );
      },
    ),
  ],
)

3. 修改跳转代码：

onPressed: () {
  context.goNamed(
    OtherProfilePageTestFuture.routeName + "_from_chat",
    extra: ChatRouteExtra(userAccount: userAccount!, childUid: userAccount!.uid),
  );
}

说明 #

推荐使用路径参数方案，因为它符合路由设计的标准规范，支持路由地址分享，且职责划分清晰；复合对象方案仅适合特殊场景，会增加路由参数的复杂度。

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