使用TypeScript开发React项目时NextUI动态项类型报错如何解决？

问题场景 #

在React+TypeScript项目中编写了如下代码：

interface ICountry {
  id: string;
  name: string;
}
...

const [countries, setCountries] = useState<ICountry[] | undefined>();
...
       <Dropdown>
          <DropdownTrigger>
            <Button variant="bordered">Open Menu</Button>
          </DropdownTrigger>
          <DropdownMenu aria-label="Static Actions" items={countries}>
            {(country) => (
              <DropdownItem
                key={country.id}
                value={country.id}
                onPress={(e: any) => setCountry(e.currentTarget.value)}
              >
                {country.name}
              </DropdownItem>
            )}
          </DropdownMenu>
        </Dropdown>

运行时出现类型错误：

Property 'id' does not exist on type 'object'.

原因是DropdownMenu的渲染函数参数country被识别为泛型object类型，无法访问ICountry接口定义的id和name属性。

解决方案 #

方法1：给DropdownMenu指定泛型类型 #

大多数UI库的DropdownMenu组件支持通过泛型约束items的类型，直接给组件指定ICountry泛型，就能让渲染函数自动推导参数类型：

<Dropdown>
  <DropdownTrigger>
    <Button variant="bordered">Open Menu</Button>
  </DropdownTrigger>
  {/* 显式指定DropdownMenu的泛型为ICountry */}
  <DropdownMenu<ICountry> aria-label="Static Actions" items={countries || []}>
    {(country) => (
      <DropdownItem
        key={country.id}
        value={country.id}
        onPress={(e) => setCountry(e.currentTarget.value)}
      >
        {country.name}
      </DropdownItem>
    )}
  </DropdownMenu>
</Dropdown>

注：添加countries || []是为了处理countries为undefined的情况，避免组件接收空值报错。

方法2：显式标注渲染函数参数类型 #

直接给渲染函数的country参数指定ICountry类型，明确参数的结构：

<DropdownMenu aria-label="Static Actions" items={countries || []}>
  {/* 给country参数显式指定ICountry类型 */}
  {(country: ICountry) => (
    <DropdownItem
      key={country.id}
      value={country.id}
      onPress={(e) => setCountry(e.currentTarget.value)}
    >
      {country.name}
    </DropdownItem>
  )}
</DropdownMenu>

方法3：优化useState的类型定义 #

如果countries初始值不会是undefined，可以直接将其类型定义为ICountry[]，并设置初始空数组，减少空值处理：

// 初始值设为空数组，类型简化为ICountry[]
const [countries, setCountries] = useState<ICountry[]>([]);

这种情况下，DropdownMenu能更准确地推导items的类型，配合方法1或方法2使用效果更好。

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