Typescript下用useRef绑定FlatList调用scrollToIndex出现类型错误如何解决

你出现类型错误的根本原因有两个：

1. useRef的泛型参数填写错误：你传入的是列表项的类型，但FlatList的ref需要绑定的是FlatList组件本身的实例类型，而非列表项数据类型
2. useRef没有设置初始值为null，导致current的初始类型为undefined，和FlatList要求的ref类型不匹配

正确实现步骤 #

1. 定义类型和导入组件 #

你的列表项类型定义是正确的，保留即可，同时确保从react-native导入FlatList组件和对应类型：

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

// 列表项类型，和你之前的定义一致
interface ListItem {
  data: string;
  type: number;
  id: number;
}

2. 正确声明ref #

给useRef指定泛型为带列表项参数的FlatList类型，初始值设为null：

const flatListRef = useRef<FlatList<ListItem>>(null);

3. 绑定ref和调用方法 #

绑定ref不会再报错，调用方法时加可选链避免空值运行时报错：

<FlatList
  ref={flatListRef}
  data={store.data}
  renderItem={/* 你的列表项渲染逻辑 */}
  // 其他FlatList配置项
/>

<Button 
  onPress={() => {
    flatListRef.current?.scrollToIndex({index: 目标索引})
  }}
/>

疑问解答 #

• 是否需要在创建useRef钩子时传入数据结构作为初始值？
  不需要，仅需要传入null作为初始值即可，ref存储的是FlatList组件实例，和列表项数据结构无关。
• 如何正确定义FlatList ref的接口类型？
  直接使用从react-native导出的FlatList类型作为useRef的泛型参数，泛型内部传入你的列表项类型即可。

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