React Native TypeScript 中如何正确给FlatList声明类型 解决renderItem报错

• React Native FlatList 组件的 renderItem 回调接收的参数是 ListRenderItemInfo 类型对象，该对象存储单条数据的属性名为 item，不是你代码中写的 data，属性名不匹配导致类型校验失败，你收到的报错信息中 Property 'data' is missing in type 'ListRenderItemInfo' 也明确指出了该问题。
• 没有给 FlatList 声明泛型参数，TypeScript 无法自动推导列表项的类型，也会增加类型错误概率。

修改后的完整代码如下：

import type { ListRenderItem } from 'react-native';

export interface Category {
  id: string;
  title: string;
  bg: string;
}
export const CATEGORIES: Category[] = [
  { id: "c1", title: "Italian", bg: "#f5428d" }
];

const Item = ({ data }: { data: Category }) => (
  <View style={styles.item}>
    <Text style={styles.title}>{data.title}</Text>
  </View>
);
const CategoriesScreen = ({ navigation }: CategoriesScreenProps) => {
  // 写法1：直接用内置类型声明renderItem，无需手动写参数类型
  const renderItem: ListRenderItem<Category> = ({ item }) => <Item data={item} />;

  // 写法2：手动写参数类型也可以，只要属性名是item就行
  // const renderItem = ({ item }: { item: Category }) => <Item data={item} />;

  return (
    // 给FlatList加泛型<Category>指定项类型
    <FlatList<Category>
      data={CATEGORIES}
      keyExtractor={(item) => item.id}
      renderItem={renderItem}
      numColumns={2}
    />
  );
};

核心修改点：

1. 将renderItem入参的解构字段从data改为官方定义的item
2. 为FlatList添加泛型<Category>，明确列表项的类型
3. 可直接使用React Native内置的ListRenderItem<Category>类型声明renderItem函数，减少手动写类型的错误概率。

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