TypeScript访问RTK Query返回值提示property does not exist如何解决

• Redux Toolkit Query的mutation异步触发函数返回值为联合类型：{ data: UserInfo; } | { error: FetchBaseQueryError | SerializedError; }。请求成功时返回带data字段的成功结构，请求失败时返回带error字段的错误结构，两类结构不存在共有的success字段，因此直接访问data.success会触发TypeScript类型校验报错。

下面是3种常用的合法取值方式：

方案1：类型守卫分支处理（推荐） #

先通过in操作符判断是否存在error字段，TypeScript会自动完成类型缩小，后续就能安全访问data属性：

const result = await loginUser(loginData);
// 类型守卫判断：如果存在error字段则为请求失败
if ("error" in result) {
  // 此处写请求失败的处理逻辑，比如提示错误信息
  console.error("登录请求失败", result.error);
  return;
}
// 走到此处时TypeScript自动推导result为成功结构，可直接取data
const userInfo = result.data;
console.log(userInfo.success);

方案2：可选链快速取值（适合轻量场景） #

如果不需要单独做错误分支处理，可以用可选链语法直接兜底取值，避免类型报错：

const result = await loginUser(loginData);
// 可选链访问，data不存在时会返回undefined，不会抛出类型错误
console.log(result.data?.success);

方案3：使用RTK Query内置Hook（React组件内优先） #

你导出的useLoginUserMutation是RTK Query专为React组件设计的调用方式，自带请求状态、成功/错误结果的响应式状态，更符合框架使用规范：

import { useLoginUserMutation } from './你对应的api文件路径';

function LoginPage() {
  // 第一个参数是触发请求的函数，第二个参数是请求相关的响应式状态
  const [triggerLogin, { isLoading, data: userInfo, error }] = useLoginUserMutation();

  const handleLoginSubmit = async (loginFormData) => {
    await triggerLogin(loginFormData);
  }

  return (
    <div>
      {/* 直接使用响应式状态即可，无需额外做类型判断 */}
      {userInfo && <p>登录结果：{userInfo.success ? '成功' : '失败'}</p>}
      {error && <p>登录出错，请稍后重试</p>}
    </div>
  )
}

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