解决Vue类型错误：Expected Array, got String，导致需要显示字段显示成了[object Object]

一、问题背景

在做 CRM 系统二次开发时，前端页面保存数据时报错：
[Vue warn]: Invalid prop: type check failed for prop "value". 
Expected Array, got String

错误如下图：

并且导致某个字段（订单号 orderNumber）展示出来竟然是 [object Object]，保存后虽然能成功，但用户体验很差。

二、问题复现

1. 前端调试结果

通过 console.log 打印接口返回的数据：
{
  "orderNumber": [
    {
      "orderNumber": "SB0472E-H241202-1624",
      "code": "SB0472E-H241202-1624"
    }
  ]
}

而我期望的其实是一个 字符串：
{
  "orderNumber": "SB0472E-H241202-1624"
}

导致前端接收到 Array，而组件 <CrmRelativeCell> 预期是 String，自然就爆了 Vue 的类型检查错误。

2. 后端代码问题

仔细排查后，发现罪魁祸首在于 后端返回数据时，强行包了一层集合：
 

// 原本的错误代码
if (crmModel.get("orderNumber") != null) {
    crmModel.put("orderNumber", Collections.singletonList(
        new JSONObject()
            .fluentPut("orderNumber", crmModel.get("orderNumber"))
            .fluentPut("code", crmModel.get("orderNumber"))
    ));
}

这一段逻辑原本是为了兼容“关联字段”（类似 contractId 这种需要下拉选择的情况），返回 List<JSONObject> 让前端渲染下拉。

但 orderNumber 已经不再是关联字段，而是普通的文本字段。
于是多包了一层 List，前端就直接拿成了数组。
 

三、解决方案

解决办法很简单：
把这段多余的逻辑注释掉 / 删除掉，保持返回值为字符串即可。

   // ❌ 这段多余的逻辑去掉
        // if (crmModel.get("orderNumber") != null) {
        //     crmModel.put("orderNumber", Collections.singletonList(new JSONObject().
        //             fluentPut("orderNumber", crmModel.get("orderNumber")).fluentPut("code", crmModel.get("orderNumber"))));
        // }

前端再调试，返回结果恢复正常：

四、经验总结

• 字段类型要和前端预期保持一致

  • 下拉、多选字段 → 返回 List<JSONObject>

  • 普通输入框字段 → 返回 String / Number

• 不要图省事复用逻辑

  • 当时写 orderNumber 的时候，直接照搬了 contractId 的处理方式，结果坑了自己。

• 前端错误提示要细看

  • Vue 已经明确告诉我们「Expected Array, got String」，正是因为数据结构对不上。

五、写在最后

这次问题其实很小，但因为后端一个“多余的封装”，前端收到的数据结构对不上，导致了渲染异常。以后开发过程中一定要注意：

• 哪些字段是关联关系，哪些是普通字段；

• 保持前后端数据结构契约一致；

• 遇到 [object Object] 大概率是你传了对象，组件其实想要字符串。

希望这篇记录能帮到和我一样踩坑的同学 🙌