因嵌套对象名称变化，FusionAuth错误映射至TypeScript遇难题

问题背景 #

需要将FusionAuth返回的动态结构错误映射到TypeScript接口，并实现统一的错误信息提取逻辑。FusionAuth返回的错误示例如下：

示例1：重复邮箱错误 #

{"statusCode":400,"exception":{"fieldErrors":{"email":[{"code":"[duplicate]email","message":"A User with email already exists."}]}}}

示例2：密码过短错误 #

{"statusCode":400,"exception":{"fieldErrors":{"password":[{"code":"[tooShort]password","message":"The [user.password] property is shorter than the minimum of [8] characters."}]}}}

可见exception.fieldErrors下的键名（如email、password）随错误类型动态变化。原有的TypeScript接口定义无法适配这种动态结构，导致提取错误信息时出现TypeError: Cannot read properties of undefined (reading 'map')错误。

原错误的接口定义：

export class ClientResponseError {
  statusCode: string;
  exception: Exception;
}

export interface ExceptionName {
  message: string;
}

export interface FieldErrors {
  fieldError: ExceptionName[];
}

export interface Exception {
  fieldErrors: FieldErrors;
}

原测试代码：

error.exception.fieldErrors.fieldError.map(error => {
     console.log(error.message)
    })

解决方案 #

1. 修正TypeScript接口定义 #

使用索引签名适配动态键名，同时增加可选属性增强健壮性：

// 单个错误项的结构
export interface FieldErrorItem {
  code: string;
  message: string;
}

// 动态字段错误集合：键为任意字符串，值为错误项数组
export interface FieldErrors {
  [key: string]: FieldErrorItem[];
}

export interface Exception {
  fieldErrors?: FieldErrors; // 可选字段，避免无字段错误时报错
}

export class ClientResponseError {
  statusCode: number; // 修正为数字类型（示例中statusCode是400）
  exception?: Exception; // 可选字段，增强容错性
}

2. 实现错误信息提取方法 #

在ClientResponseError类中添加方法，遍历所有动态字段的错误信息并收集：

export class ClientResponseError {
  statusCode: number;
  exception?: Exception;

  // 提取所有错误消息到数组
  getErrorMessages(): string[] {
    const errorMessages: string[] = [];
    
    // 空值检查：避免访问undefined属性
    if (!this.exception?.fieldErrors) {
      return errorMessages;
    }

    // 遍历所有动态字段的错误列表
    Object.values(this.exception.fieldErrors).forEach(errorList => {
      errorList.forEach(errorItem => {
        errorMessages.push(errorItem.message);
      });
    });

    return errorMessages;
  }
}

3. 使用示例 #

// 假设从API获取的错误对象已断言为ClientResponseError类型
const error: ClientResponseError = await fetchAuthApi().catch(err => err as ClientResponseError);

// 提取并打印所有错误消息
const messages = error.getErrorMessages();
messages.forEach(msg => console.log(msg));

关键说明 #

• 索引签名[key: string]: FieldErrorItem[]允许FieldErrors接受任意字符串作为键名，完美适配FusionAuth的动态错误字段。
• 可选属性（?）和空值检查（?.）避免了因部分错误无exception或fieldErrors导致的空指针异常。
• 使用Object.values()遍历所有动态字段的错误列表，无需关心具体键名即可收集所有错误信息。

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