Nuxt3通过链接访问页面时数据获取失败的问题求助

直接访问页面触发500错误的核心原因有两个：

1. 错误依赖内部属性：你直接使用了trips._rawValue，这是Nuxt内部存储原始响应的属性，在服务端渲染（SSR）初始化阶段可能为null，调用filter方法自然会报错。而通过NuxtLink跳转是客户端导航，此时数据可能已完成加载或被缓存，所以不会触发错误。
2. 数组判断逻辑错误：t.id in trending的写法不符合需求——in操作符用于检查对象键名，对数组来说它判断的是索引而非元素值。你的trending是数值数组，这个逻辑只会在t.id等于0-4时返回true，和你想筛选id在数组中的需求不符。

修正代码如下，同时解决上述两个问题：

<script setup>    
const { data: trips } = await useFetch("/trips.json", { server: true });
const trending = [0, 1, 2, 3, 4];

// 方案1：可选链+空值合并，确保数据存在再执行过滤
const seasonalTrips = trips.value?.filter(t => trending.includes(t.id)) || [];

// 方案2：用computed延迟计算（更推荐，响应式友好）
const seasonalTrips = computed(() => {
  if (!trips.value) return [];
  return trips.value.filter(t => trending.includes(t.id));
});
</script>

关键说明 #

• 永远不要依赖Nuxt内部的_rawValue属性，应该使用公开的trips.value访问响应式数据。
• 用Array.includes()替代in操作符，才能正确判断元素是否存在于数组中。
• 通过返回空数组的兜底处理，确保即使数据未加载完成，seasonalTrips始终是数组类型，避免后续模板渲染出现异常。

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