Next.js13实验版中TypeScript参数解构后props.className报错求助

你的问题出在类型定义的结构错误：你在PropsType里声明了一个名为props的嵌套属性，但组件解构时的...props拿到的是原类型中除handleChange外的剩余部分（也就是这个嵌套的props属性），而非传入组件的所有额外DOM属性，所以TypeScript找不到props.className。

下面是两种简洁的修复方式：

方式一：继承原生DOM组件的Props（推荐） #

这种方式能让组件支持所有<div>标签的原生属性（比如className、style、id等），同时保留自定义的handleChange：

import type { ComponentPropsWithoutRef } from 'react';

// 合并自定义属性和div的原生Props
type PropsType = ComponentPropsWithoutRef<'div'> & {
  handleChange?: (value: string) => void; // 用具体函数类型替代模糊的Function
};

export default function Search({ handleChange, className = "", ...rest }: PropsType) {
  return (
    <div className={`search-bar flex middle ${className}`} {...rest}>
      <div className="search-icon flex middle">
        <svg>
          <use href="#search-icon" />
        </svg>
      </div>
      <input placeholder="Search" size={1} onChange={handleChange} />
    </div>
  );
}

方式二：仅声明需要的属性 #

如果只需要支持className和handleChange，可以直接显式声明：

type PropsType = {
  handleChange?: (value: string) => void;
  className?: string;
};

export default function Search({ handleChange, className = "", ...props }: PropsType) {
  return (
    <div className={`search-bar flex middle ${className}`} {...props}>
      <div className="search-icon flex middle">
        <svg>
          <use href="#search-icon" />
        </svg>
      </div>
      <input placeholder="Search" size={1} onChange={handleChange} />
    </div>
  );
}

关键说明 #

• 避免使用Function类型，改用具体的函数签名（比如(value: string) => void），提升类型安全性。
• 解构时可以直接提取className，合并后再传递剩余属性到<div>，这样组件的用法和原生DOM标签一致，更符合React开发习惯。

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