React Navigation自定义Header参数TypeScript类型报错求助

核心问题是自定义Header没正确关联导航器的类型定义，导致TypeScript识别不了navigation和route的属性。按下面步骤来搞定：

1. 导入正确的基础类型 #

从@react-navigation/native-stack引入StackHeaderProps，这是自定义Header的标准类型模板：

import { StackHeaderProps } from '@react-navigation/native-stack';

2. 给自定义Header绑定你的导航器类型 #

把你定义的HomeNavigatorTypes作为泛型传给StackHeaderProps，让TypeScript明确所有路由的参数结构：

// 注入导航器类型，让Header能识别所有路由的参数
type CustomHeaderProps = StackHeaderProps<HomeNavigatorTypes>;

const CustomHeader = ({ route }: CustomHeaderProps) => {
  // 现在route.name会自动提示你定义的所有路由，route.params也会对应不同路由的参数类型
  let title = '';
  switch (route.name) {
    case 'Home':
      title = '首页';
      break;
    case 'BusinessCategory':
      // 这里TS会自动识别route.params是{ category: BusinessCategories }，不会报属性不存在
      title = route.params.category.name;
      break;
    case 'Cart':
      title = '购物车';
      break;
    // 其他路由按需添加标题逻辑
  }

  return (
    <View style={{ height: 56, justifyContent: 'center', alignItems: 'center', backgroundColor: '#fff' }}>
      <Text style={{ fontSize: 18, fontWeight: 'bold' }}>{title}</Text>
    </View>
  );
};

3. 在导航器中使用自定义Header #

在HomeNavigator.Screen的options里直接传入自定义Header即可，导航器已经关联了HomeNavigatorTypes，参数类型会自动传递：

<HomeNavigator.Navigator>
  <HomeNavigator.Screen 
    name="Home" 
    component={HomeScreen} 
    options={{ header: props => <CustomHeader {...props} /> }} 
  />
  <HomeNavigator.Screen 
    name="BusinessCategory" 
    component={BusinessCategoryScreen} 
    options={{ header: props => <CustomHeader {...props} /> }} 
  />
  {/* 其他屏幕同理配置 */}
</HomeNavigator.Navigator>

额外：单个屏幕定制Header逻辑 #

如果某个屏幕需要单独写Header逻辑，直接在options里用带类型的参数即可，TypeScript会自动识别该路由的参数结构：

<HomeNavigator.Screen
  name="BusinessCategory"
  component={BusinessCategoryScreen}
  options={({ route }) => ({
    header: () => (
      <View style={{ padding: 16 }}>
        <Text>{route.params.category.name}</Text>
      </View>
    )
  })}
/>

踩坑提示 #

• 确保HomeNavigatorTypes里的所有路由名称和你实际使用的完全一致，少写或错写会导致TypeScript报错。
• 对于参数为undefined的路由（比如Home、Cart），route.params会被识别为undefined，不要直接访问它的属性，避免报错。

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