使用Radix UI React Accordion时遇`Unsafe assignment of an any value`类型错误

我尝试导入@radix-ui/react-accordion的Root组件，将其重命名为Accordion后导出，却收到Unsafe assignment of an any value类型错误。已尝试用as强制指定类型，但问题仍未解决，且不想禁用该ESLint规则。

相关代码：

import * as React from "react";
import * as AccordionPrimitive from "@radix-ui/react-accordion";
import { cn } from "@/lib/utils";

const Accordion = AccordionPrimitive.Root;

错误说明：ESLint标记AccordionPrimitive.Root为any类型，赋值时触发@typescript-eslint/no-unsafe-assignment规则报错。

解决方法 #

• 更新依赖确保类型完整
  Radix UI的类型默认包含在包内，但旧版本可能存在类型缺失。执行命令更新到最新稳定版：

  npm install @radix-ui/react-accordion@latest
  

• 改用解构导入组件
  避免整体导入后取值，直接解构Root并重命名，让TypeScript准确识别类型：

  import * as React from "react";
  import { Root as Accordion } from "@radix-ui/react-accordion";
  import { cn } from "@/lib/utils";
  

• 显式指定组件类型
  如果解构导入无效，手动为Accordion指定React组件类型：

  import * as React from "react";
  import * as AccordionPrimitive from "@radix-ui/react-accordion";
  import { cn } from "@/lib/utils";
  
  const Accordion: React.ComponentType<typeof AccordionPrimitive.Root> = AccordionPrimitive.Root;
  

• 检查ESLint配置
  确认.eslintrc中@typescript-eslint/no-unsafe-assignment规则正常启用，无冲突配置：

  {
    "rules": {
      "@typescript-eslint/no-unsafe-assignment": "error"
    }
  }
  

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