Laravel/Vue项目中一行代码处理可空参数避免TypeError报错

核心原因 #

你碰到的问题源于JavaScript三元表达式的求值逻辑：不管条件分支是true还是false，两个分支的表达式都会被解析（求值）。当editMode为false时，代码仍会尝试访问task.value.data.id，但此时task.value是undefined，因此抛出TypeError。

一行代码解决方案 #

利用Vue3支持的**可选链操作符（?.）**安全访问嵌套属性，结合三元表达式完成表单初始化：

const form = ref({
  id: editMode.value ? task.value?.data?.id ?? '' : '',
  // 其他表单字段按相同逻辑处理，示例：
  title: editMode.value ? task.value?.data?.title ?? '' : '',
  content: editMode.value ? task.value?.data?.content ?? '' : ''
})

代码说明 #

• task.value?.data?.id：如果task.value或task.value.data为undefined/null，会直接返回undefined，不会继续访问后续属性，从根源避免报错。
• ?? ''：空值合并操作符，当可选链返回undefined时，用空字符串作为默认值，保证表单字段有合法初始值。

简洁写法备选 #

如果追求更紧凑的代码，也可以用逻辑与+可选链的写法（可读性稍弱，但满足一行需求）：

const form = ref({
  id: editMode.value && task.value?.data?.id || '',
  title: editMode.value && task.value?.data?.title || '',
  content: editMode.value && task.value?.data?.content || ''
})

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