Shadcn Select动态生成SelectItem选中后不显示问题求助

问题 #

使用Shadcn React库的Select组件时，动态生成的SelectItem选中后，无法在SelectValue框中显示选中内容。用Zod做验证，选中操作有效且Zod能成功获取值，但选择框仅显示为空。静态编写SelectItem时功能正常。

相关代码：

<FormField
control={form.control}
name="type"
render={({ field }) => (
<FormItem className="grid grid-cols-4 items-center gap-4">
   <FormLabel className="sm:block sm:text-right">
      Type
   </FormLabel>
   <Select
      disabled={isSubmitting}
      onValueChange={field.onChange}
      defaultValue={field.value}
      >
      <FormControl>
         <SelectTrigger className="col-span-4 sm:col-span-3">
            <SelectValue placeholder="Select a property type"/>
         </SelectTrigger>
      </FormControl>
      <SelectContent className="SelectContent">
         {propTypes.map((type) => (
         <SelectItem key={type.id} value={type.id}>
            {type.name}
         </SelectItem>
         ))}
      </SelectContent>
   </Select>
</FormItem>
)}
/>

静态选项示例：

<SelectContent>
   <SelectItem value="m@example.com">m@example.com</SelectItem>
   <SelectItem value="m@google.com">m@google.com</SelectItem>
   <SelectItem value="m@support.com">m@support.com</SelectItem>
</SelectContent>

原因分析 #

问题核心在于类型不匹配：动态生成的SelectItem的value是数字类型（type.id为数字），而Shadcn的Select组件默认将选中值存储为字符串类型。当表单状态中的值是数字时，组件无法匹配到对应的SelectItem文本，导致SelectValue无法渲染显示内容。静态选项的value是字符串，和组件内部存储类型一致，所以正常显示。

解决方案 #

有两种可行的修复方式：

方式一：将动态选项的value转为字符串 #

遍历propTypes时，把type.id转为字符串作为SelectItem的value：

<SelectItem key={type.id} value={type.id.toString()}>
  {type.name}
</SelectItem>

同时确保Zod验证规则中对应字段的类型为字符串，或者保持数字但在表单初始化/处理时做类型转换。

方式二：给Select组件指定value的类型，并同步表单字段类型 #

通过泛型明确Select组件的value类型为数字，确保和type.id、表单字段类型一致：

<Select<number>
  disabled={isSubmitting}
  onValueChange={field.onChange}
  defaultValue={field.value}
>
  {/* 其余代码不变 */}
</Select>

这种方式需要保证表单的type字段在Zod schema中定义为数字类型，且初始化值也是数字类型，保持全链路类型一致。

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