Vue 3.3.4读取user属性遇未定义类型错误，求排查方案

核心问题 #

你的代码错误地给page.props添加了.value——Inertia.js的usePage()返回的props本身就是响应式对象，无需通过.value访问，这直接导致page.props.value为undefined，进而触发读取user的报错。

修复代码 #

修改<script setup>里的computed属性：

// 错误写法
const user = computed(() => page.props.value.user);

// 正确写法
const user = computed(() => page.props.user);

可选兜底优化 #

为兼容后端未传入user的场景，可添加空值兜底：

const user = computed(() => page.props.user ?? null);

为什么之前的尝试没生效？ #

你之前尝试的条件渲染、异步处理等方案，都是基于user本身的存在性，但问题出在获取user的源头代码错误——page.props.value根本不存在，所以这些方案无法触达问题核心。

额外验证步骤 #

1. 打开浏览器控制台，执行$page.props，确认后端是否正确传入了user字段。
2. 若user是动态更新的，可添加watch监听确保组件响应变化：

   watch(() => page.props.user, (newUser) => {
     // 处理user变化逻辑
   })
   

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