React类型报错：'({...}:AtomicDropdownProps)=>boolean'无法赋值给FC<AtomicDropdownProps>

问题代码 #

以下是基于React和MUI开发的下拉选择器组件代码：

import React, { ChangeEvent } from 'react';
import { FormControl, InputLabel, MenuItem, Select } from '@mui/material';

interface AtomicDropdownProps {
  options: string[];
  onSelect: (selectedOption: string) => void;
}

const AtomicDropdown: React.FC<AtomicDropdownProps> = ({ options, onSelect }) => {
  const handleOptionChange = (event: ChangeEvent<{ value: unknown }>) => {
    const selectedValue = event.target.value as string;
    onSelect(selectedValue);
  };
  return (
    <FormControl>
      <InputLabel id="dropdown-label">Language</InputLabel>
      <Select
        labelId="dropdown-label"
        value={''}
        onChange={handleOptionChange}
      >
        {options.map((option) => (
          <MenuItem key={option} value={option}>
            {option}
          </MenuItem>
        ))}
      </Select>
    </FormControl>
  );
};

export default AtomicDropdown;

错误提示 #

React抛出类型不兼容错误：

"Type '({ options, onSelect }: AtomicDropdownProps) => boolean' is not assignable to type 'FC'"

问题原因 #

该错误是因为TypeScript错误地将组件函数的返回类型推断为boolean，但React.FC要求组件返回ReactElement | null类型。这种推断错误通常由语法解析歧义或隐含类型冲突导致。

解决方案 #

方案1：显式指定组件返回类型 #

在组件函数上明确标注返回类型，强制TypeScript识别正确的返回值类型：

const AtomicDropdown: React.FC<AtomicDropdownProps> = ({ options, onSelect }): React.ReactElement => {
  // 原有代码保持不变
};

方案2：放弃使用React.FC，直接定义函数类型 #

避免React.FC带来的隐含类型（如默认children属性）干扰，直接定义函数的输入输出类型：

const AtomicDropdown = ({ options, onSelect }: AtomicDropdownProps): React.ReactElement => {
  // 原有代码保持不变
};

方案3：优化组件类型安全性（额外建议） #

原组件中Select的初始值为空字符串，但选项列表中可能不存在该值，这会导致MUI内部的类型警告。可以添加状态管理优化组件：

import React, { ChangeEvent, useState } from 'react';
import { FormControl, InputLabel, MenuItem, Select } from '@mui/material';

interface AtomicDropdownProps {
  options: string[];
  onSelect: (selectedOption: string) => void;
  defaultValue?: string;
}

const AtomicDropdown = ({ options, onSelect, defaultValue = options[0] }: AtomicDropdownProps): React.ReactElement => {
  const [selectedValue, setSelectedValue] = useState<string>(defaultValue);

  const handleOptionChange = (event: ChangeEvent<{ value: string }>) => {
    const newValue = event.target.value;
    setSelectedValue(newValue);
    onSelect(newValue);
  };

  return (
    <FormControl>
      <InputLabel id="dropdown-label">Language</InputLabel>
      <Select
        labelId="dropdown-label"
        value={selectedValue}
        onChange={handleOptionChange}
      >
        {options.map((option) => (
          <MenuItem key={option} value={option}>
            {option}
          </MenuItem>
        ))}
      </Select>
    </FormControl>
  );
};

export default AtomicDropdown;

内容的提问来源于stack exchange，提问作者MUHAMMAD SHAHID RAFI C P