如何修复Vue项目中的「Uncaught (in promise) TypeError: Cannot convert undefined or null to object」错误

嘿，我来帮你搞定这两个问题——控制台的类型错误，还有文本输入无法获取数据的问题：

一、解决「Cannot convert undefined or null to object」错误 #

这个错误直接出现在你的onCatchError函数里，根源是**err.response.data.errors可能是undefined或null**，此时调用Object.keys(errors)就会触发类型错误。另外你的代码里还有个小疏漏：message.join('; ')没有把结果赋值回message，导致最终Toast显示的是数组而非字符串。

修改后的错误处理函数如下：

function onCatchError(err) {
  // 使用可选链操作符，避免深层属性访问时因undefined报错
  const errors = err?.response?.data?.errors;
  let message = [];
  
  // 先判断errors存在，再处理键值遍历
  if (errors && Object.keys(errors).length) {
    deepForEachScalarLeaf(errors, (path, node) => {
      message.push(`${path[0]}: ${node}; `);
    });
    // 把join后的字符串赋值回message
    message = message.join('; ');
  } else {
    // 提供更友好的默认错误信息，避免直接显示err对象
    message = err?.message || 'An unexpected error occurred';
  }

  Toast.open({
    duration: 3000,
    message: message,
    position: 'is-bottom',
    type: 'is-danger'
  });
}

另外，你Vue组件里调用updateAttachment的地方（computed的setter）是异步操作，建议手动捕获错误，避免未处理的promise错误冒泡：

// 以attachmentAccepted的setter为例，其他setter同理
set: function (val) {
  this.updateAttachment([this.attachment.id, { ignoreAttachment: !val }])
    .catch(onCatchError);
},

二、解决文本输入无法获取数据的问题 #

看你的Vue组件模板，textarea绑定的是v-model="form.message"，但你在data()里只声明了message: ""，没有提前定义form对象。Vue的响应式系统要求必须提前声明属性，否则无法追踪变化，这就导致你无法正常获取输入内容。

修改data()部分：

data() {
  return {
    waiting: {},
    // 新增form对象，包含message属性
    form: {
      message: ""
    }
  }
},

这样v-model="form.message"就能正常绑定，模板里的{{ form.message }}也能正确显示输入内容了。

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