如何修复useQuery解构数据时读取undefined的title属性报错问题

useQuery在请求未完成、请求抛出错误的阶段，返回的data字段默认值为undefined，直接对undefined做嵌套解构取内部属性，就会触发"can not read property title of undefined"错误。
另外你写的解构语法本身也存在错误：解构语法中属性名: 别名是重命名逻辑，你写的title : []是想给title设默认值，但错把赋值的=写成了冒号，且接口返回的title、desc是普通文本类型，设置空数组作为默认值也不符合数据类型要求。

方案1：解构时增加层级默认值兜底 #

直接在解构时给每一层可能为undefined的值设置兜底默认值，从语法层面避免访问undefined属性，适合简单快速修复的场景：

// 给data设置空对象默认值，给title、desc设置符合业务类型的默认值
const {
  data: {
    title = '',
    desc = ''
  } = {}
} = useQuery('entitle', apiCall)

方案2：使用useQuery内置select配置做数据转换（官方推荐） #

把接口返回值的处理逻辑放到useQuery的select配置项里，select只会在接口成功返回、data存在时才执行，从根源上避免访问undefined的问题，逻辑聚合度更高，适合中复杂业务场景：

const {
  data: content,
  isLoading,
  isError
} = useQuery({
  queryKey: ['entitle'],
  queryFn: apiCall,
  select: (res) => {
    // 这里res一定是接口成功返回的有效值，不需要担心undefined
    return {
      title: res?.data?.[0]?.title ?? '',
      desc: res?.data?.[0]?.desc ?? ''
    }
  }
})

// 解构时再做一层兜底即可
const { title = '', desc = '' } = content ?? {}

• 不要给文本类型的字段设置空数组作为默认值，避免后续调用字符串方法（比如title.length、title.slice()）时出现类型错误，默认值可以根据业务需求设置为空字符串、null或者undefined。
• 建议配合useQuery返回的isLoading、isError状态做加载中、请求失败的UI兜底，不要在请求过程中直接渲染默认值作为最终内容。

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