Typescript开发Help Desk App时API提交报错：Expected string, received object

前端请求端排查 #

• 直接查看请求实际 payload：打开浏览器 DevTools 的 Network 面板，找到保存工单的 API 请求，查看 Request Payload 里的 distributor 字段，确认它的实际值和类型——别只依赖 TypeScript 类型定义，运行时才是真相。很多时候下拉组件会把整个选项对象（比如 { id: 'xxx', name: 'xxx' }）绑定到字段，而非预期的字符串值。
• 检查表单提交逻辑：如果用了表单库（如 react-hook-form），核对 register 配置是否正确绑定到字符串属性；如果是手动构造请求体，确认有没有误把 distributor 对象直接传入，应该提取它的字符串属性（比如 distributor.id 或 distributor.name）。
• 打印运行时类型：在前端提交代码前添加 console.log(typeof values.distributor, values.distributor)，确认运行时的实际类型和值，排除 TypeScript 类型断言或接口定义错误导致的认知偏差。

API 路由端排查 #

• 打印接收的请求数据：在 Next.js API 路由里，添加 console.log(typeof req.body.distributor, req.body.distributor)，确认后端实际收到的 distributor 是什么——前端传的和后端接的可能因为解析问题不一致（比如表单 enctype 错误、JSON 解析异常）。
• 核对 Prisma 操作参数：检查传给 prisma.ticket.create 的 distributor 字段，确保是字符串类型。比如如果前端误传了对象，哪怕你以为是字符串，Prisma 也会因为类型不匹配抛出错误。

类型与 Schema 校验 #

• 检查 Prisma Schema：确认 Ticket 模型中 distributor 字段的类型是 String，没有被定义为 Json 或关联字段（如果是关联，应该用 @relation，此时传字符串会触发类型错误）。
• 核对数据库表结构：登录 MySQL 查看工单表的 distributor 字段类型，确保是 VARCHAR/TEXT 等字符串类型，而非 JSON 或其他类型。

常见场景修复示例 #

如果是下拉组件绑定错误导致的问题，比如选中的是完整的 distributor 对象，修改代码如下：

// 错误写法：直接绑定整个对象
<Select onChange={(val) => setValues({...values, distributor: val})} />

// 正确写法：提取字符串属性
<Select onChange={(val) => setValues({...values, distributor: val.id})} />

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