Angular13路由Resolver报TS2322类型不匹配错误如何解决

该TS2322编译错误由TypeScript严格类型校验触发，核心逻辑如下：

• ServersService的getServer方法内部通过数组的find()方法匹配对应ID的服务实例，而Array.find()的TS默认返回类型为匹配项类型 | undefined——当数组中无符合条件的项时，find会返回undefined。由于getServer没有显式声明返回值类型，TS自动推断其返回值为{ id: number; name: string; status: string; } | undefined。
• 实现的ServerResolverService遵循Resolve<Server>接口约定，要求resolve方法的返回值必须是Server | Observable<Server> | Promise<Server>，类型集合中不包含undefined。直接返回可能为undefined的server变量时，类型不匹配就会触发编译报错。

补充：代码中取默认ID的逻辑+route.params['id'] | 1使用了位或运算符，当路由参数id为0时会被错误兜底为1，建议替换为空值合并运算符??做默认值处理更严谨。

可根据业务场景选择以下任意一种修复方式：

方案1：解析器内做空值兜底（侵入性最小） #

在resolve方法中对可能为undefined的server做兜底处理，保证返回值始终符合Server类型约束：

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Server> | Promise<Server> | Server {
  // 修正默认ID的取值逻辑，用空值合并替代位或
  const id = +route.params['id'] ?? 1;
  const server = this.serverService.getServer(id);
  // 匹配不到服务实例时返回默认值，也可以根据业务逻辑做路由跳转兜底
  return server ?? {
    id: 1,
    name: 'Productionserver',
    status: 'online'
  };
}

方案2：从服务层修正返回类型 #

将Server接口抽为公共类型后，给getServer方法显式声明返回类型，在方法内部处理找不到实例的场景，从根源消除undefined类型：

// ServersService中引入公共定义的Server接口
getServer(id: number): Server {
  const server = this.servers.find(s => s.id === id);
  if (!server) {
    // 可以抛出业务异常，也可以返回默认实例
    throw new Error(`ID为${id}的服务实例不存在`);
  }
  return server;
}

方案3：非空断言（不推荐） #

如果可以100%确定传入的ID一定能匹配到对应实例，可以用TS非空断言运算符!，告诉编译器该值不会为undefined，跳过类型校验：

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Server> | Promise<Server> | Server {
  const id = +route.params['id'] | 1;
  const server = this.serverService.getServer(id);
  return server!;
}

注意：该方案丢失了类型安全保障，一旦传入不存在的ID，运行时会返回undefined到路由快照中，后续组件读取数据时大概率出现空指针报错。

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