Nuxt3使用API数据填充输入字段硬刷新报错的解决咨询

问题根因 #

核心问题是**useFetch是异步请求**，组件初始化阶段API请求还未完成，此时pkg.value的初始值为null——直接访问pkg.value.field_value必然会抛出Cannot read properties of null的错误。后续控制台能正常打印，是因为请求完成后pkg.value被更新为API返回的数据，但初始化阶段的报错已经触发了。

可行解决方案 #

根据你需要动态更新field的需求，推荐以下几种办法：

1. 监听数据变化动态同步

先给request设置合法初始值，再通过watch监听pkg的状态变化，数据就绪后自动赋值：

const { data: pkg } = useFetch(() => '/api/id/1/');

const request = ref({
  field: '',
});

// 监听pkg的变化，包含初始状态的立即检查
watch(pkg, (newData) => {
  if (newData) {
    request.value.field = newData.field_value;
  }
}, { immediate: true });

这种方式既能避免初始化报错，又能保证request.field在API数据更新时自动同步，完全满足你后续动态修改的需求。

2. 用可选链+默认值初始化

如果不需要自动同步，只是想初始化时避免报错，可以用可选链操作符规避空值访问：

const { data: pkg } = useFetch(() => '/api/id/1/');

const request = ref({
  field: pkg.value?.field_value || '',
});

这里pkg.value?.field_value会在pkg.value为null时直接返回undefined，再通过|| ''设置默认空值，避免报错。

3. 利用useFetch的成功回调赋值

在useFetch的onSuccess回调中处理赋值，确保只有当API请求成功返回数据后才更新request：

const request = ref({
  field: '',
});

const { data: pkg } = useFetch(() => '/api/id/1/', {
  onSuccess(data) {
    request.value.field = data.field_value;
  }
});

这种方式逻辑更明确，直接绑定请求成功的时机来赋值，从根源上避免了空值访问的问题。

模板层额外优化 #

如果在模板中使用request.field，可以配合v-if先判断pkg是否存在，避免模板渲染时的空值问题：

<template>
  <input v-if="pkg" v-model="request.field" placeholder="请输入内容" />
</template>

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