TypeScript动态对象访问问题求助：API错误字段获取报错

1. 核心问题分析 #

你遇到的TS2339错误，根源在于ApiResponse的errors字段被定义为ApiError | string类型——当errors是字符串时，不存在email这类表单字段属性，TypeScript因此阻止了不安全的属性访问。

2. 单行简洁解决方案 #

要实现单行访问并在键不存在时返回null兜底，可以结合类型窄化或类型断言：

方式一：安全类型检查（无风险） #

<InputMessage errors={
  typeof response?.errors === 'object' && response.errors ? response.errors.email ?? null : null
} />

方式二：类型断言（需确保场景合法性） #

如果你能确定当前场景下errors一定是字段级错误对象（而非字符串），可以用断言简化：

<InputMessage errors={(response?.errors as ApiError)?.email ?? null} />

3. 动态对象键的访问 #

如果需要通过变量访问动态字段（比如const field = 'email'），直接使用方括号语法即可，前提是先完成类型窄化：

const fieldName = 'email';
const error = typeof response?.errors === 'object' && response.errors 
  ? response.errors[fieldName] ?? null 
  : null;

4. 泛型优化方案（可选） #

如果想让TypeScript自动校验表单字段的合法性，可以给ApiError和ApiResponse添加泛型约束：

export interface ApiError<T extends string = string> {
  [key in T]?: string | string[];
}

export interface ApiResponse<Data, Fields extends string = string> {
  code?: number;
  status?: string;
  message?: string;
  data?: null | Data | Data[];
  errors?: ApiError<Fields> | string;
}

使用时指定表单字段的联合类型：

type UserFormFields = 'name' | 'email' | 'password';
const response: ApiResponse<UserInfo, UserFormFields> = await fetchUserApi();

// 此时TypeScript会自动提示合法字段，且阻止拼写错误
<InputMessage errors={response?.errors?.email ?? null} />

5. 通用工具函数（推荐） #

为了避免重复编写类型检查逻辑，封装一个工具函数可以大幅简化代码：

export const getFieldError = (
  errors: ApiError | string | undefined,
  field: string
): string | string[] | null => {
  if (typeof errors !== 'object' || errors === null) return null;
  return errors[field] ?? null;
};

使用时一行搞定：

<InputMessage errors={getFieldError(response?.errors, 'email')} />

内容的提问来源于stack exchange，提问作者Angga Ari Wijaya