如何使用Zod创建校验React元素的Schema并正确定义cardTop类型

AI 小北

2026-7-29

正确定义必填React元素/组件类型的Zod Schema方案

问题核心

你当前代码里直接用ReactElement作为Zod属性类型是错误的——Zod需要的是运行时可验证的Schema，而ReactElement只是TypeScript的类型，没有运行时校验能力，必须用Zod的自定义验证逻辑来实现。

解决方案

根据cardTop的实际需求（接收已渲染的React元素，还是未渲染的组件），有两种实现方式：

1. 接收已渲染的React元素（如 `<div>内容</div>`）

使用z.custom结合React内置的isValidElement函数做运行时校验，同时指定TypeScript类型为ReactElement：

import { FC, ReactElement, isValidElement } from 'react';
import { z } from 'zod';

export const BlogCard2PropsSchema = z.object({
  link: z.string(),
  title: z.string(),
  category: z.string(),
  description: z.string(),
  cardTop: z.custom<ReactElement>((val) => isValidElement(val), {
    message: "cardTop必须是有效的React元素"
  })
});

2. 接收React组件（如 `MyComponent` 而非 `<MyComponent />`）

如果需要传入的是组件类型（函数组件或类组件），可以用ComponentType作为TypeScript类型，同时调整验证逻辑：

import { FC, ComponentType, isValidElement } from 'react';
import { z } from 'zod';

export const BlogCard2PropsSchema = z.object({
  link: z.string(),
  title: z.string(),
  category: z.string(),
  description: z.string(),
  cardTop: z.custom<ComponentType>((val) => {
    // 验证是否是组件函数/类，或是可渲染的元素
    return typeof val === 'function' || isValidElement(val);
  }, {
    message: "cardTop必须是React组件或有效元素"
  })
});