SvelteKit中page.params为undefined仅返回subscribe函数如何解决

问题原因 #

1. page 是 Svelte 框架的响应式存储（store）类型对象，本身仅包含订阅相关的方法，不能直接读取属性值，必须使用 Svelte 专属的 $ 前缀语法，才能获取到 store 的当前响应值
2. 存在拼写不匹配的潜在问题：路由文件中导入的组件名为 PostDetails（末尾带s），但你的实际组件文件名为 PostDetail.svelte（末尾无s），需要先确认路径和名称拼写正确，避免先触发组件导入错误

解决方法 #

• 修正组件内访问 page 的语法，使用 $page 读取store的当前值，修改src/components/pages/PostDetail.svelte代码如下：

<script>
   import { page } from '$app/stores';

   // 使用$前缀获取store当前值
   console.log({ page: $page });
   console.log('page.params', $page.params);
   // 可正常获取到postId
   console.log('postId', $page.params.postId);
</script>

<h1>Post Title: {$page.params.postId}</h1>

• 确认路由文件中组件导入的路径、名称与实际组件文件完全一致，排除拼写错误导致的其他异常

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