调用getToken后读取accessToken字段为何出现undefined错误？

我在表单中定义了如下提交函数：

type UserSubmitData = {
  username: string
  password: string
}

async function onSubmit(data: UserSubmitData){
    (async() => {
      const response = await getToken(data);
      console.log("response: ",response)
      if (response) {
        const accessToken = response.accessToken
        console.log(accessToken)
        saveAuth(accessToken)
      }
    })();
  }

同时还有一个向服务器请求获取token的函数：

const getToken = async (userData:UserSubmitData) =>{
    return postRequest<TokenResponse>("auth/login",userData).then(r => r.data)
    .catch(error => {   
      if (error.response.status === 400){
        setError("root",{type:'custom',message:"wrong username or password"})
      }else{
        setError("root",{type:'custom',message:"internal server error"})
      }
    });
  }

响应类型定义如下：

type TokenResponse = {
  accessToken:string
  refreshToken:string
  loggedIn:string
}

执行请求时，response的类型为const response: void | TokenResponse。我通过if判断response存在后尝试提取accessToken，但此时const accessToken = response.accessToken这一行中accessToken的值为undefined，而实际服务器返回的响应包含正确的两个token。移除if判断也无法解决问题，请问这一问题的原因是什么？

原因分析及解决方法 #

核心原因1：字段命名不匹配（最常见） #

你的TokenResponse定义使用驼峰命名（accessToken），但服务器实际返回的可能是蛇形命名（如access_token）或其他命名格式。TypeScript的类型定义仅做静态检查，不会在运行时自动转换字段名，导致你通过response.accessToken无法取到对应值，结果为undefined。

核心原因2：响应数据结构不匹配 #

你在getToken中直接返回r.data，但如果postRequest的响应结构并非{ data: TokenResponse }（比如响应数据嵌套在更深层级，如r.data.token），或者服务器返回的响应体本身和TokenResponse的结构不一致（比如accessToken字段被包裹在其他对象中），也会导致取到undefined。

核心原因3：getToken函数的隐性返回问题 #

虽然请求成功时你返回了r.data，但如果请求过程中触发了catch块（比如存在未被察觉的隐性错误），catch块没有返回任何值，会导致getToken返回undefined。不过结合你说“服务器返回正确的两个token”，这个可能性较低，但可以通过打印error信息排查。

排查及解决步骤 #

1. 查看console.log("response: ",response)的实际输出，确认response对象的具体结构和字段名：
   • 如果字段名是蛇形（如access_token），修改TokenResponse的命名为蛇形，或在获取时使用对应字段名（如response.access_token），也可以用工具函数做驼峰/蛇形转换。
   • 如果response结构和TokenResponse不符（如数据嵌套在子对象中），调整getToken中返回的内容（比如return r.data.token）。
2. 检查postRequest的实现，确认响应数据的解析逻辑是否正确，是否将服务器返回的JSON正确转换为对象。
3. 在getToken的catch块中添加console.log(error)，排查是否存在未被察觉的请求错误。

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