使用yup的ValidationError时提示undefined不能用作索引类型如何解决

yup 定义的 ValidationError 类型中，path 属性的类型为 string | undefined——部分全局校验场景下的错误确实没有对应绑定的字段路径，因此 TypeScript 不允许直接将可能为 undefined 的值作为对象索引使用，会抛出类型错误。

你可以根据自己的业务场景选择以下任意一种处理方式：

方案1：添加非空断言（最简单，适合确定所有错误都有对应path的场景） #

如果你编写的所有校验规则都是针对具体字段的，可以确定遍历到的错误一定存在path属性，直接加非空断言告诉TS该值一定存在即可：

import { ValidationError } from 'yup';

interface Errors {
    [key: string]: string;
}

export default function getValidationErrors(err: ValidationError): Errors {
    const validationErrors: Errors = {};

    err.inner.forEach(error => {
        // 加!非空断言，确认path一定有值
        validationErrors[error.path!] = error.message;
    });
    return validationErrors;
}

方案2：加存在性判断（最稳妥，避免运行时异常） #

如果不能保证所有错误都有path，先判断path存在再赋值，没有path的错误会被自动忽略，适合不需要处理全局校验错误的场景：

import { ValidationError } from 'yup';

interface Errors {
    [key: string]: string;
}

export default function getValidationErrors(err: ValidationError): Errors {
    const validationErrors: Errors = {};

    err.inner.forEach(error => {
        // 只有path存在时才赋值
        if (error.path) {
            validationErrors[error.path] = error.message;
        }
    });
    return validationErrors;
}

方案3：无path时指定默认key（适合需要保留全局错误的场景） #

如果需要保留没有对应字段的全局校验错误，可以给path设置默认的索引key：

import { ValidationError } from 'yup';

interface Errors {
    [key: string]: string;
}

export default function getValidationErrors(err: ValidationError): Errors {
    const validationErrors: Errors = {};

    err.inner.forEach(error => {
        // 无path时默认存到root字段下，可自定义名称
        const key = error.path ?? 'root';
        validationErrors[key] = error.message;
    });
    return validationErrors;
}

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