著名な shadcn/ui の新しいサイドバーコンポーネントがエラーを出しましたか？

勇哥最近在做一个 AI 对话项目，前端选型用了 shadcn/ui，shadcn/ui オープンソースでデザインが美しく、プロジェクトにコピー＆ペーストするだけで使用できます。最近新たに Sidebar コンポーネントが登場し、豆包などの AI プラットフォームの AI 対話効果を迅速に構築できます。

shadcn-0

開干、一顿操作猛于虎、直接下载官方预设的 block 到应用中：

npx shadcn@latest add sidebar-01

開 dev モードでプレビュー効果を確認すると、PC 端の効果は完璧で、後端インターフェースとの接続が残るだけです。モバイルモードに切り替え、サイドバーを切り替えると、鮮紅の Console Error が目に飛び込んできます：

DialogContent は、コンポーネントがスクリーンリーダーユーザーにアクセス可能であるために DialogTitle を必要とします。DialogTitle を隠したい場合は、私たちの VisuallyHidden コンポーネントでラップできます。詳細については、https://radix-ui.com/primitives/docs/components/dialog を参照してください。

まず解決策を述べます：

Sidebar コンポーネントのソースコードを見つける：components/ui/sidebar.tsx
Sidebar 定義の isMobile 判定部分を見つける

<SheetContent /> コンポーネントに <SheetHeader/> を追加します。具体的には以下の通りです：

if (isMobile) {
  return (
    <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
      <SheetContent
        {/* この部分のコードは省略... */}
      >
        {/* 以下のコードを追加 */}
        <SheetHeader className="sr-only">
          <SheetTitle>Sidebar</SheetTitle>
          <SheetDescription></SheetDescription>
        </SheetHeader>
        {/* コード追加終了 */}
        <div className="flex h-full w-full flex-col">{children}</div>
      </SheetContent>
    </Sheet>
  )
 }

次に発生の原因について：

shadcn/ui の Sidebar コンポーネントはモバイルモードで Sheet コンポーネントを使用します
shadcn/ui の Sheet コンポーネントは radix-ui の dialog コンポーネントに依存しています
radix-ui の dialog コンポーネントは DialogContent を必須としています

いわば、入れ子になっています。

文中で言及されているリソースは以下の通りです：

shadcn/ui プロジェクト公式サイト：https://ui.shadcn.com/
コードリポジトリ：https://github.com/shadcn-ui/ui
shadcn/ui Sidebar コンポーネントの使用：
- https://ui.shadcn.com/docs/components/sidebar
- https://ui.shadcn.com/blocks