Shadcn UI Sheet组件报错：Property 'open'不存在，如何解决？

错误原因 #

你遇到的Property 'open' does not exist on type 'IntrinsicAttributes & Omit<LucideProps, "ref"> & RefAttributes<SVGSVGElement>'错误，本质是TypeScript将你的Sheet组件错误识别为Lucide图标组件，同时当前shadcn/ui的Sheet组件API与教程使用的旧版本不一致：

1. 教程依赖的旧版shadcn/ui中Sheet组件的受控模式逻辑，与当前基于Radix UI的新版Sheet组件不兼容；
2. 你的@/components/ui/sheet组件可能存在导出错误，或未正确生成，导致类型推断异常。

解决方案 #

1. 重新生成正确的Sheet组件 #

打开终端运行命令，重新生成shadcn的Sheet组件：

npx shadcn-ui@latest add sheet

生成的sheet.tsx文件应基于@radix-ui/react-sheet，正确导出Sheet（对应Radix的Root组件）、SheetTrigger、SheetContent等核心组件。

2. 修正MobileNav组件代码 #

受控模式（手动管理状态）

如果需要手动控制Sheet的开闭状态，代码如下：

// MobileNav.tsx
import { useState } from 'react';
import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
import { Button } from '@/components/ui/button';
import { Menu as MenuIcon } from 'lucide-react';

const mobileItems = ['A', 'B', 'C'];

export default function MobileNav() {
  const [open, setOpen] = useState(false);

  return (
    <Sheet open={open} onOpenChange={setOpen}>
      {/* 触发按钮 */}
      <SheetTrigger asChild>
        <Button variant="ghost" size="icon" className="md:hidden">
          <MenuIcon />
        </Button>
      </SheetTrigger>

      {/* 侧边栏内容 */}
      <SheetContent side="left"> 
        <div className="flex flex-col items-start">
          {mobileItems.map((item, index) => (
            <Button
              key={index}
              variant="link"
              onClick={() => setOpen(false)}
            >
              {item}
            </Button>
          ))}
        </div>
      </SheetContent>
    </Sheet>
  );
}

非受控模式（内部管理状态）

如果不需要手动控制状态，可使用SheetClose组件自动关闭Sheet，简化代码：

// MobileNav.tsx
import { Sheet, SheetContent, SheetTrigger, SheetClose } from '@/components/ui/sheet';
import { Button } from '@/components/ui/button';
import { Menu as MenuIcon } from 'lucide-react';

const mobileItems = ['A', 'B', 'C'];

export default function MobileNav() {
  return (
    <Sheet>
      <SheetTrigger asChild>
        <Button variant="ghost" size="icon" className="md:hidden">
          <MenuIcon />
        </Button>
      </SheetTrigger>

      <SheetContent side="left"> 
        <div className="flex flex-col items-start">
          {mobileItems.map((item, index) => (
            <SheetClose asChild key={index}>
              <Button variant="link">
                {item}
              </Button>
            </SheetClose>
          ))}
        </div>
      </SheetContent>
    </Sheet>
  );
}

3. 确认依赖完整性 #

确保项目安装了Sheet组件的核心依赖：

npm install @radix-ui/react-sheet

补充说明 #

你提到Shadcn文档中Sheet链接指向Dialog组件，是因为shadcn/ui的Sheet组件本质是基于Radix UI Sheet的封装，文档结构调整后部分入口可能指向类似组件的说明，但核心实现仍是独立的Sheet组件。

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