Inertia Vue3组件接收props失败：users未定义错误求助

场景复现 #

后端通过Inertia向Vue组件传递users数据，routes/web.php代码如下：

Route::get('/', function () {
    return Inertia::render('Dashboard',['users'=> DB::table('users')->get()]);
})->middleware(['auth', 'verified'])->name('dashboard');

前端resources/Pages/Dashboard.vue尝试用defineProps接收users，但执行console.log(users)时抛出Uncaught (in promise) ReferenceError: users is not defined错误，组件代码：

<script setup>
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout.vue";
import { Head } from "@inertiajs/vue3";
defineProps({
    users: {
        type: Array,
    },
});
console.log(users); // 报错位置
import Nav from "../Components/Nav.vue";
import Header from "../Components/Header.vue";
import Content from "../Components/Content.vue";
</script>

<template>
    <Head title="Dashboard" />

    <AuthenticatedLayout>
        <template #header>
            <Header />
        </template>

        <template #nav>
            <Nav />
        </template>
        <template #content>
            <Content />
        </template>
    </AuthenticatedLayout>
</template>

原因分析 #

在Vue的<script setup>语法中，defineProps是编译宏，它不会在顶级作用域直接创建名为users的变量。它的返回值是包含所有props的对象，必须通过这个对象（或解构后的变量）才能在JS代码中访问props数据。模板中可以直接用users是因为模板会自动关联props上下文，但JS逻辑层必须显式通过返回值访问。

解决方案 #

有两种常见的修正方式：

方式1：接收props对象并访问 #

将defineProps的返回值赋值给变量，通过变量访问users：

<script setup>
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout.vue";
import { Head } from "@inertiajs/vue3";
// 接收props对象
const props = defineProps({
    users: {
        type: Array,
        required: true, // 建议添加required确保数据必传
    },
});
console.log(props.users); // 正确访问
import Nav from "../Components/Nav.vue";
import Header from "../Components/Header.vue";
import Content from "../Components/Content.vue";
</script>

方式2：解构props对象 #

直接解构defineProps的返回值，获取users变量：

<script setup>
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout.vue";
import { Head } from "@inertiajs/vue3";
// 解构获取users
const { users } = defineProps({
    users: {
        type: Array,
        required: true,
    },
});
console.log(users); // 正确访问
import Nav from "../Components/Nav.vue";
import Header from "../Components/Header.vue";
import Content from "../Components/Content.vue";
</script>

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