如何在Svelte 5中使用Zod正确验证组件Props？

报错原因 #

1. props是Svelte的特殊变量名：当你在script标签中声明let props时，Svelte编译器会自动将其识别为组件的props集合声明，而非普通局部变量。此时编译器会按照组件props的规则处理它，要求它具备store的结构（包含subscribe方法），因此抛出Cannot use 'props' as a store的错误。
2. $props()的执行时序问题：$props()是Svelte 4+提供的响应式获取props的语法，本质是对props store的订阅。当你直接在let props = IndexParamsSchema.parse($props())中使用它时，编译器的变量提升逻辑会判定$props()在props变量声明前被调用，从而触发Block-scoped variable '$props' used before its declaration的错误。

解决方案：保留props命名的可行方式 #

方法一：用const声明验证后的props #

Svelte仅会对let props触发特殊的props声明逻辑，使用const声明则会将其视为普通常量，完全避开冲突：

<script lang="ts">
  import { IndexParamsSchema } from "./types";

  // 用const声明，避免Svelte的特殊处理
  const props = IndexParamsSchema.parse($props());
  const { items } = props;
</script>

这种方式既保留了props的直观命名，又能通过Zod确保运行时类型安全，TypeScript也能正确推导props和items的类型。

方法二：先获取原始props再验证（适合需要保留响应式的场景） #

如果你的组件props可能动态变化，需要保持响应式，可以先获取原始props，再验证赋值给const props：

<script lang="ts">
  import { IndexParamsSchema } from "./types";

  // 先获取原始props，避免命名冲突
  const rawProps = $props();
  // 验证后用const声明props
  const props = IndexParamsSchema.parse(rawProps);
  const { items } = props;
</script>

方法三：结合组件props声明与Zod校验（非顶层组件场景） #

如果是普通子组件（而非路由顶层页面），可以先通过export let声明props，再用Zod做运行时校验：

<script lang="ts">
  import { IndexParamsSchema } from "./types";

  // 声明组件对外暴露的props
  export let items: unknown;

  // 运行时校验并提取合法值
  const props = IndexParamsSchema.parse({ items });
  const { items: validItems } = props;
</script>

总结 #

核心问题在于Svelte对let props的特殊语法解析，只要将验证后的变量用const声明为props，就能继续使用这个命名，同时满足Zod的运行时类型校验需求。

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