Vue3+Nuxt3刷新页面出现Cannot read properties of null错误的原因与解决

在Nuxt3的Universal（SSR）渲染模式下，刷新页面会触发服务端渲染流程：

• 服务端会直接执行useLazyFetch并同步渲染模板，如果API请求返回null、请求失败，或者data在服务端初始化阶段未拿到有效值时，模板中直接访问data.carModels就会抛出"Cannot read properties of null"的错误。
• 而页面跳转属于客户端导航，此时代码在浏览器中执行，pending状态会先显示加载提示，直到请求完成后data才有值，不会提前触发对data.carModels的访问，因此不会报错。

方案1：给useLazyFetch设置默认值 #

调用useLazyFetch时，通过default选项给data设置兜底的默认结构，确保即使请求失败，data也始终包含carModels数组，同时给URL参数添加空值保护避免无效拼接：

<script setup>
const route = useRoute();

const {pending, data} = await useLazyFetch(
    "api/car-models"
    + `?start-date=${route.query.startDate ?? ''}`
    + `&end-date=${route.query.endDate ?? ''}`,
    {
        default: () => ({ carModels: [] })
    }
);
</script>

方案2：模板中添加空值安全访问 #

在模板里使用可选链操作符（?.）和空值合并运算符（??），避免直接访问null/undefined的属性：

<template>
        <div v-if="pending">
            Loading...
        </div>
        <div v-else-if="data?.carModels?.length === 0">
            Sorry, no cars available for the selected dates and location.
        </div>
        <div v-else>
            <ul>
                <li v-for="car in data?.carModels ?? []">
                    <CarCard :car="car"/>
                </li>
            </ul>
        </div>
</template>

方案3：排查服务端API可用性 #

确认api/car-models路由在服务端环境下能正常工作：

• 检查服务端是否能正确读取route.query的参数（比如参数是否存在、格式是否符合API要求）
• 测试API在服务端调用时的返回结果，确保不会返回null或异常结构

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