React FlatList renderItem无法识别ItemTrending接口类型报错如何解决？

• 首次出现item类型为unknown的报错，是因为FlatList属于泛型组件，没有显式传入列表项类型参数时，TypeScript无法从data属性自动推导renderItem回调的入参类型。
• 手动为解构参数指定{item: ItemTrending}触发重载错误，是因为renderItem的完整入参类型是ListRenderItemInfo<T>，除item外还包含index、separators等属性，仅指定item字段会导致参数整体类型不匹配。

推荐优先使用给FlatList显式指定泛型的方案，无需额外定义类型即可自动完成全链路类型校验：

import { FlatList } from 'react-native';

interface ItemTrending {
  id: number;
  name: string;
  description: string;
  image: string;
}

const TrendingComponent: React.FC = () => {
  const [data] = useState<ItemTrending[]>([
    {id: 0, name: 'Nike', description: 'Nike', image: 'www.google.com'},
    {id: 1, name: 'Adidas', description: 'Adidas', image: 'www.google.com'}
  ]);

  return (
    <Container>
      {/* 给FlatList传入泛型参数ItemTrending */}
      <FlatList<ItemTrending>
        horizontal
        data={data}
        renderItem={({ item }) => (
          <Title>{item.name}</Title>
        )}
      />
    </Container>
  );
};

如果需要单独抽离renderItem函数，可以使用React Native导出的ListRenderItem类型声明：

import { FlatList, ListRenderItem } from 'react-native';

const renderTrendingItem: ListRenderItem<ItemTrending> = ({ item }) => {
  return <Title>{item.name}</Title>
}

// 组件内直接传入即可
const TrendingComponent: React.FC = () => {
  // 其他逻辑不变
  return (
    <Container>
      <FlatList
        horizontal
        data={data}
        renderItem={renderTrendingItem}
      />
    </Container>
  )
}

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