React Navigation跳转传参后目标页面props为undefined求助

嗨，我帮你捋捋这个问题——你遇到的是React Navigation里很常见的参数传递误区，咱们一步步修复：

问题出在哪？ #

你在跳转时确实传了to和from，但目标页面ConversationScreen直接从props里解构这两个值是不对的！在React Navigation v5+的机制里，导航参数不会直接作为组件props注入，而是被包装在route对象的params属性里，所以你直接取自然是undefined。

另外提一句，你的showConversation异步函数写法没问题，await拿到用户信息后再导航是正确的，这部分不用改。

修复步骤 #

第一步：修正ConversationScreen的参数获取方式 #

首先更新你的组件props类型，把route对象加进去（用TypeScript的话更规范）：

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

// 先定义你的导航栈参数类型，替换成你实际的栈结构
type RootStackParamList = {
  Conversation: {
    to: string;
    from: string;
  };
};

interface ConversationScreenProps {
  navigation: any;
  route: RouteProp<RootStackParamList, 'Conversation'>;
}

然后在组件里从route.params里拿参数，还可以加个默认值防止意外：

const ConversationScreen = ({ navigation, route }: ConversationScreenProps) => {
  // 从route.params里解构，加个空对象兜底避免报错
  const { to, from } = route.params || {};
  const [messages, setMessages] = useState<Array<IMessage>>([]);
  const [chatMessage, setChatMessage] = useState<string>('');
  const socket = io('http://127.0.0.1:3000');
  
  console.log(to); // 现在应该能正常打印出值了
  console.log(from);
  // ... 你的其他代码
}

第二步：确认导航栈配置（可选但重要） #

如果用TypeScript，最好在创建栈导航器时指定参数类型，这样跳转时能获得类型提示：

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

const Stack = createStackNavigator<RootStackParamList>();

function AppNavigator() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="你的主页面名称" component={MainScreen} />
      <Stack.Screen name="Conversation" component={ConversationScreen} />
    </Stack.Navigator>
  );
}

第三步：小优化（可选） #

你的showConversation函数写法没问题，不过可以把它改成箭头函数更简洁：

const showConversation = async (company: Company) => {
  const currentUser = await StorageHelper.retrieveEntity() as User;
  const from = currentUser.uid;
  const to = company.uid;
  console.log(from, to);
  navigation.navigate('Conversation', { to, from });
};

额外提醒 #

• 记得给route.params加兜底，比如route.params || {}，避免跳转时没传参数导致解构报错。
• 如果是用React Navigation v4及更早版本，参数是用navigation.getParam('to')获取，但现在基本都是v5+了，用route.params就对了。

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