React Native中SectionList渲染失败的类型错误及显示问题求助

问题背景 #

我是React Native新手，之前用FlatList能正常工作，但数据展示不符合需求，改用SectionList实现带头部的分组展示后，出现TypeScript类型错误。尝试用as any断言后类型错误消失，但页面全空白，连SectionList外的组件都不显示。

TypeScript错误信息 #

(property) sections: readonly SectionListData<any, GamesInfoSection>[]
An array of objects with data for each section.

No overload matches this call.
  Overload 1 of 2, '(props: SectionListProps<any, GamesInfoSection> | Readonly<SectionListProps<any, GamesInfoSection>>): SectionList<...>', gave the following error.
    Type 'GamesInfoSection[] | undefined' is not assignable to type 'readonly SectionListData<any, GamesInfoSection>[]'.
      Type 'undefined' is not assignable to type 'readonly SectionListData<any, GamesInfoSection>[]'.
  Overload 2 of 2, '(props: SectionListProps<any, GamesInfoSection>, context: any): SectionList<any, GamesInfoSection>', gave the following error.
    Type 'GamesInfoSection[] | undefined' is not assignable to type 'readonly SectionListData<any, GamesInfoSection>[]'.
      Type 'undefined' is not assignable to type 'readonly SectionListData<any, GamesInfoSection>[]'.ts(2769)
SectionList.d.ts(210, 3): The expected type comes from property 'sections' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<SectionList<any, GamesInfoSection>> & Readonly<...>'
SectionList.d.ts(210, 3): The expected type comes from property 'sections' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<SectionList<any, GamesInfoSection>> & Readonly<...>'

完整组件代码 #

<SectionList
  sections={games}
  keyExtractor={(item, index) => item + index}
  renderItem={({ item }) => (
    <View style={styles.game_section}>
      <View style={styles.game_match}>
        <View style={styles.game_time}>
          <Text>{item.games?.time}</Text>
        </View>
        <View style={styles.breakLine}></View>
        <View style={styles.game_team}>
          <View style={styles.team}>
            <View style={styles.team_brand}></View>
            <Text style={styles.team_name}>{item.games?.home}</Text>
          </View>
          <View style={styles.team}>
            <View style={styles.team_brand}></View>
            <Text style={styles.team_name}>{item.games?.away}</Text>
          </View>
        </View>
        <View style={styles.breakLine}></View>
        <View style={styles.score}>
          <View style={styles.team}>
            <Text style={styles.team_name}>{item.games?.homeScore}</Text>
          </View>
          <View style={styles.team}>
            <Text style={styles.team_name}>{item.games?.homeScore}</Text>
          </View>
        </View>
      </View>
    </View>
  )}
  renderSectionHeader={({ section: { infoSection } }) => (
    <View style={styles.game_info}>
      <Text style={styles.game_country}>{infoSection?.country}</Text>
      <Text style={styles.game_league}>{infoSection?.league}</Text>
    </View>
  )}
/>

数据定义代码 #

const [games, setGames] = useState<GamesInfoSection[]>();

useEffect(() => {
  try {
    const api = setupApiGames();
    api?.get('/games').then(response => {
      setGames(response.data);
    })
  } catch (error) {
    console.log(error + 'error ao acessar os Jogos');
  }
}, [])

尝试过的解决方案 #

sections={games as any}
keyExtractor={(item, index) => item + index}
renderItem={({ item }) => (

解决步骤 #

1. 修复TypeScript类型错误 #

错误核心是games初始值为undefined，而SectionList要求sections必须是非空的只读数组，同时GamesInfoSection结构必须符合SectionList的规范：每个section对象必须包含data字段（存储该组的列表项数据）。

• 给games设置初始空数组，避免undefined：

  const [games, setGames] = useState<GamesInfoSection[]>([]);
  

• 修正GamesInfoSection类型定义，匹配SectionList要求：

  interface GamesInfoSection {
    infoSection: {
      country: string;
      league: string;
    };
    data: {
      games: {
        time: string;
        home: string;
        away: string;
        homeScore: string;
        awayScore: string;
      };
    }[];
  }
  

2. 修复空白页问题 #

空白页大概率是数据结构不匹配导致SectionList无法渲染：

• 确认API返回的response.data结构和GamesInfoSection完全一致，每个section都包含data数组；
• 修正renderItem中的数据访问逻辑：item是data数组的元素，直接访问item.games即可（数据结构正确的情况下无需可选链）；
• 移除as any断言，用正确的类型定义解决类型问题，避免隐藏结构错误；
• 给SectionList添加style={{ flex: 1 }}，确保它能占满父容器的可用空间，避免因布局问题导致不显示。

3. 额外优化 #

• 添加空状态提示，方便排查数据为空的情况：

  <SectionList
    // ...其他props
    ListEmptyComponent={() => <Text>暂无赛事数据</Text>}
  />
  

• 添加加载状态，避免初始空数组导致的空白：

  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    try {
      const api = setupApiGames();
      api?.get('/games').then(response => {
        setGames(response.data);
        setLoading(false);
      })
    } catch (error) {
      console.log(error + 'error ao acessar os Jogos');
      setLoading(false);
    }
  }, [])
  
  if (loading) return <ActivityIndicator />;
  

内容的提问来源于stack exchange，提问作者Bruno Araújo