React中TypeScript多类型Prop的if语句类型判断问题

你的问题核心是TypeScript的类型窄化——因为networkError是Error | ServerParseError | ServerError | null的联合类型，而result属性仅属于ServerError，TS无法自动推断你访问的是ServerError实例，因此报错。下面给出两种直接可行的解决方法：

方法一：使用in操作符直接窄化类型 #

in操作符是TypeScript支持的原生类型守卫，只要在条件中检查'result' in error.networkError，TS就会自动将该分支下的error.networkError推断为ServerError类型。修改后的代码如下：

if (
    error.networkError &&
    'result' in error.networkError &&
    error.networkError.result.errors &&
    error.networkError.result.errors.length
) {
    const errors = error.networkError.result.errors.map((err) => {
        const { message, locations, path } = err;
        return (
            <div key={path}>
                <p>
                    <strong>[Network error]:</strong>
                    Message: {message}
                </p>
            </div>
        );
    });
}

方法二：自定义类型守卫函数 #

如果需要在多个地方复用类型判断逻辑，可以写一个自定义类型守卫函数，明确判断对象是否为ServerError：

// 自定义类型守卫，返回值为类型谓词
function isServerError(err: unknown): err is ServerError {
    return (
        typeof err === 'object' &&
        err !== null &&
        'result' in err &&
        typeof (err as ServerError).result === 'object' &&
        (err as ServerError).result !== null &&
        'errors' in (err as ServerError).result
    );
}

// 使用类型守卫
if (error.networkError && isServerError(error.networkError)) {
    const errors = error.networkError.result.errors.map((err) => {
        const { message, locations, path } = err;
        return (
            <div key={path}>
                <p>
                    <strong>[Network error]:</strong>
                    Message: {message}
                </p>
            </div>
        );
    });
}

两种方法都能让TypeScript正确识别networkError的类型，解决编译报错问题。前者适合单次使用，后者适合多处复用场景。

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