HOC传递Props异常：封装组件丢失react-navigation的route属性

你的HOC代码本身逻辑是正确的，{...props}确实会把接收到的所有props传递给被封装组件。出现route丢失的情况，大概率是以下几个原因：

1. 导航配置错误，未注册封装后的组件 #

检查你的react-navigation导航配置，确认注册的是封装后的WrappedFoo，而非原组件Foo：

// 错误示例：注册了未封装的原组件
<Stack.Screen name="Foo" component={Foo} />

// 正确示例：注册封装后的组件
<Stack.Screen name="Foo" component={WrappedFoo} />

如果注册的是原组件，react-navigation的route等props只会传给Foo，但你实际使用的是WrappedFoo，自然拿不到这些props。

2. react-navigation版本适配问题（v5+/v6+） #

如果使用的是react-navigation v5及以上版本，类组件无法直接通过props获取navigation和route，需要额外处理：

• v5兼容方案：使用withNavigation HOC注入导航props

import { withNavigation } from '@react-navigation/compat';

class Foo extends Component {
  // ...
}

// 先给Foo注入导航props，再用你的HOC封装
const FooWithNavigation = withNavigation(Foo);
const WrappedFoo = WithDatabase(FooWithNavigation);

• v6+方案：用函数组件做一层包裹，通过钩子获取导航props

import { useNavigation, useRoute } from '@react-navigation/native';

// 用函数组件包裹类组件，注入导航props
const FooWrapper = (props) => {
  const navigation = useNavigation();
  const route = useRoute();
  return <Foo {...props} navigation={navigation} route={route} />;
};

const WrappedFoo = WithDatabase(FooWrapper);

3. 快速定位问题的调试方法 #

在你的HOC中添加日志，查看是否接收到了route props：

const WithDatabase = WrappedComponent => {
  return props => {
    console.log('HOC接收的props:', props); // 检查输出是否包含route
    const database = getDatabase();
    return <WrappedComponent {...props} database={database} />;
  };
};

• 如果日志里没有route：说明导航配置或react-navigation的上下文有问题，回到前两点排查
• 如果日志里有route：检查Foo组件是否正确读取了this.props.route（比如是否拼写错误、是否在constructor外使用）

内容的提问来源于stack exchange，提问作者four-eyes