React Native TypeScript中如何正确定义RootStackParamList？

1. 定义精确的数据类型 #

先根据数据库返回的结构，明确每个数据实体的类型，避免使用模糊的any或{}：

// 单个题目类型
type Question = {
  question: string;
  options: string[];
  answer: string;
  // 按需添加其他字段，比如id、解析等
};

// 章节类型
type Section = {
  questions: Question[];
  // 可补充章节的其他属性，如title、sectionId等
};

// Sections页面接收的参数类型
type SectionsScreenParams = {
  data: {
    sections: Section[];
  };
};

// Quiz页面接收的参数类型
type QuizScreenParams = {
  data: Question[]; // 跳转时传递的是单个章节的questions数组
};

2. 更新RootStackParamList #

将上面定义的类型替换原有的模糊定义，让TypeScript能准确校验参数：

type RootStackParamList = {
  Home: undefined;
  Modules: undefined;
  Sections: SectionsScreenParams;
  Quiz: QuizScreenParams;
};

3. 绑定导航函数的类型 #

使用useNavigation时指定RootStackParamList，确保跳转时的参数校验生效：

import { useNavigation, NavigationProp } from '@react-navigation/native';
// 导入你的RootStackParamList类型
import type { RootStackParamList } from '../path-to-your-types-file';

const navigation = useNavigation<NavigationProp<RootStackParamList>>();

错误根源 #

之前的错误源于：

• RootStackParamList中Quiz的参数定义过于模糊，TypeScript无法识别你实际传递的section.questions类型。
• 类型推断混乱导致TypeScript错误地期望参数结构为{ sections: [{ questions: []; }]; }，而非你实际传递的{ data: Question[] }，明确类型后即可解决该不匹配问题。

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