在Next.js+TypeScript中使用react-slick的Slider组件报错

问题详情 #

在Next.js + TypeScript项目中使用react-slick（搭配@types/react-slick）开发轮播组件时，导入Slider后触发类型错误，错误提示如下：

'Slider' cannot be used as a JSX component.
  Its instance type 'Slider' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.
      Type 'React.ReactNode' is not assignable to type 'import("c:/Users/bello/node_modules/@types/react/ts5.0/index").ReactNode'.
        Type 'PromiseLikeOfReactNode' is not assignable to type 'ReactNode'.ts(2786)

对应的组件代码（SlickCarousel.tsx）：

import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import Slider from "react-slick";
import { agentReviewListType } from "../_models/props";
import Image from "next/image";

export default function SlickCarousel({
  items,
}: {
  items: agentReviewListType;
}) {
  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
  };

  return (
    <section>
      <Slider {...settings}>
        {items.map((item, index) => (
          <article key={index}>
            <Image src={item.image} alt="image" />
            <p>{item.message}</p>
          </article>
        ))}
      </Slider>
    </section>
  );
}

修复方案 #

1. 统一React类型定义版本 #

这个错误大多是项目中存在多版本@types/react导致的类型冲突。可以在package.json中添加resolutions字段强制锁定版本：

{
  "resolutions": {
    "@types/react": "^18.2.0",
    "@types/react-dom": "^18.2.0"
  }
}

随后删除依赖缓存和锁文件，重新安装：

rm -rf node_modules package-lock.json
npm install

2. 更新react-slick及其类型包 #

确保使用最新兼容的react-slick和@types/react-slick版本：

npm uninstall react-slick @types/react-slick
npm install react-slick @types/react-slick

3. 适配Next.js版本降级依赖 #

如果你的Next.js版本偏旧，可能和新版react-slick存在兼容性问题，可以尝试降级到适配的版本：

npm install react-slick@^0.29.0 @types/react-slick@^0.23.10

4. 临时跳过类型检查（不推荐） #

如果以上方法都无法快速解决，可以临时用// @ts-ignore跳过该组件的类型校验，但这只是临时方案，建议优先解决根本问题：

// @ts-ignore
<Slider {...settings}>
  {items.map((item, index) => (
    <article key={index}>
      <Image src={item.image} alt="image" />
      <p>{item.message}</p>
    </article>
  ))}
</Slider>

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