使用ShadCN-UI的SheetContent组件遇TypeScript类型错误求助

错误原因 #

你的本地SheetContent组件的TypeScript类型定义中未包含children属性，导致TypeScript不允许你直接在标签内嵌套子元素。

解决步骤 #

1. 修复本地Sheet组件的类型定义 #

打开项目中./ui/sheet.tsx文件，找到SheetContent的类型定义部分，确保它包含children属性：

// 引入PropsWithChildren（如果没引入的话）
import { PropsWithChildren } from "react";

// 修改SheetContentProps定义
interface SheetContentProps extends PropsWithChildren<DialogContentProps> {
  // 保留原有其他属性
  side?: "left" | "right" | "top" | "bottom";
  // ...其他属性
}

或者直接在原有接口中添加children：

interface SheetContentProps extends DialogContentProps {
  children?: React.ReactNode;
  side?: "left" | "right" | "top" | "bottom";
  // ...其他属性
}

2. 确保组件渲染children #

检查SheetContent的实现代码，确认它正确渲染了传入的children：

const SheetContent = ({ children, className, side = "right", ...props }: SheetContentProps) => {
  return (
    <DialogContent
      className={cn(
        "fixed inset-y-0 z-50 w-full sm:max-w-lg",
        side === "left" ? "left-0" : "right-0",
        className
      )}
      {...props}
    >
      {children} {/* 确保这一行存在 */}
      {/* 其他默认内容（比如关闭按钮）... */}
    </DialogContent>
  );
};

3. 重新生成组件（可选） #

如果上述修改无效，可能是组件生成时出现了遗漏，重新生成Sheet组件：

npx shadcn-ui@latest add sheet

临时替代方案（不推荐长期使用） #

如果暂时无法修改组件代码，可以通过显式传递children prop的方式绕过类型检查：

<SheetContent 
  className="flex w-full flex-col pr-0 sm:max-w-lg"
  children={
    <SheetHeader className="space-y-2.5 pr-6">
      <SheetTitle>Cart (0)</SheetTitle>
    </SheetHeader>
  }
/>

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