SpringBoot 报错 MethodArgumentTypeMismatchException：undefined

一、背景

在使用 SpringBoot + Vue 进行开发时，笔者在点击一个页面 Tab 加载详情数据时，后端突然抛出异常，接口报错，日志输出一长串异常栈：

org.springframework.web.method.annotation.MethodArgumentTypeMismatchException: 
Failed to convert value of type 'java.lang.String' to required type 'java.lang.Integer'; 
nested exception is java.lang.NumberFormatException: For input string: "undefined"

结果如下图：

看似是 Java 的类型转换问题，但往往隐藏在这背后的，是前端传参的问题。 

报错部分解释：

 二、原因

我调用组件的时候，子组件能够接受到父组件传递的值，但是执行的时候报错，就是上面那个错
后端接口经过测试没有问题。

后端接口

前端 Vue 组件调用 API： 

await pmInterestPaymentInfoQueryListAPI({
  id: this.id // 实际上 this.id = 27
})
 

API 封装代码如下： 

观察上面代码，调用的时候传的是 id，API 里用的是 interestPaymentId，字段不一致！

于是最终拼出的 URL 是：

 /pm/pmInterestPaymentInfo/getListByPaymentId/undefined

三、解决方案

方案一：修改前端调用字段名（推荐）

保持调用参数和 URL 中路径参数一致。

方案二：修改 API 封装，兼容多种写法

export function pmInterestPaymentInfoQueryListAPI(data) {
  const id = data.interestPaymentId || data.id
  return request({
    url: `pm/pmInterestPaymentInfo/getListByPaymentId/${id}`,
    method: 'post'
  })
}

 或者修改后端接口也可以

四、总结：

这是一次典型的低级 Bug 引发的严重报错。在开发中，尤其是涉及路径参数（PathVariable）或动态拼接 URL 时，务必确保字段传值正确。undefined 不只是 JavaScript 的默认值，它在 Java 世界里是“灾难”。