为何usePage().props导致Laravel/InertiaJS网站加载空白？

问题1：为何教程中的const { auth } = usePage().props;代码无法生效？ #

usePage()是Inertia专属的钩子函数，只能在Inertia负责渲染的组件范围内调用。你遇到的报错Uncaught Error: usePage must be used within the Inertia component已经明确说明问题：你的Chirp组件没有处于Inertia的组件上下文当中。

常见的触发原因包括：

• Chirp是普通组件，没有嵌套在Inertia页面组件（比如你的Chirps/Index）内部使用
• 项目根组件未正确挂载Inertia实例，导致子组件无法获取Inertia上下文
• Chirp组件被错误地在非Inertia环境中渲染（比如直接在原生Vue/React的根节点下调用）

问题2：最初为何没有报错？ #

最初没看到报错大概率是以下情况之一：

• 你未打开浏览器开发者工具控制台，JS报错后页面直接中断渲染变成空白，但你没看到具体错误信息
• 组件在初始加载时未被渲染到DOM中（比如条件渲染的分支未触发），usePage()钩子没执行，自然不会报错；后续组件被渲染后，钩子执行才触发错误
• 开发环境的热重载或错误提示有延迟，导致报错没有及时显示

修复建议 #

• 确保Chirp组件是在Inertia页面组件（如Chirps/Index）内部被引入和使用的
• 检查项目入口文件（比如resources/js/app.js），确认已经正确初始化Inertia实例并完成挂载
• 调用usePage()时，务必保证组件处于Inertia的上下文树中，不要在独立的非Inertia组件里使用这个钩子

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