React+TypeScript中如何剔除元素类型的children并解决类型报错

针对你遇到的两个核心问题——href 属性类型报错、希望使用 children 时触发 TypeScript 错误，以下是具体的修复方案：

1. 重构 ComponentPropsWithoutChildren 类型，强制剔除 children #

你当前的类型定义并未真正移除 children 属性，只是合并了自定义 Props 和组件原生属性。要实现禁止传递 children 并触发错误，需要直接在类型中剔除 children，同时显式将其设为 never 强化校验：

import { ComponentPropsWithoutRef, ElementType } from 'react';

export type ComponentPropsWithoutChildren<
  Component extends ElementType,
  Props = {}
> = Props & 
  Omit<ComponentPropsWithoutRef<Component>, keyof Props | 'children'> & {
    // 显式约束children为never，传递时直接触发TS错误
    children?: never;
  };

改造后，任何试图给组件传递 children 的操作都会触发 TypeScript 错误，完全符合你的需求。

2. 解决 href 属性报错问题 #

报错本质是原生 <input> 元素本身没有 href 属性，因此你的组件类型中也不会包含该属性。根据你的实际需求，有两种解决方式：

方案A：需要 href 则在自定义 Props 中声明 #

如果组件内部需要用到 href（比如要渲染关联链接），先在 InputProps 中显式定义该属性：

// 自定义组件Props
interface InputProps {
  href?: string;
  // 其他自定义属性...
}

// 定义Input组件
export const Input = ({
  className,
  children, // 此处会触发TS错误，因为children被设为never
  href, // 现在不会报错，因为InputProps中已声明
  ...props
}: ComponentPropsWithoutChildren<"input", InputProps>) => {
  return (
    <div>
      {href && <a href={href}>关联链接</a>}
      <input className={className} {...props} />
    </div>
  );
};

方案B：不需要 href 则直接移除解构 #

如果组件不需要 href 属性，直接从解构列表中删除该字段即可消除错误：

export const Input = ({
  className,
  children, // 此处会触发TS错误
  ...props
}: ComponentPropsWithoutChildren<"input", InputProps>) => {
  return <input className={className} {...props} />;
};

效果验证 #

• 传递 children 时，TypeScript 会提示 Type 'xxx' is not assignable to type 'never'，达到预期的错误触发效果；
• placeholder 等原生 input 属性可正常使用，不受类型改造影响；
• href 属性要么通过显式声明正常使用，要么移除后不再报错。

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