React Native跨屏幕传参失败：参数undefined问题求助

问题重现 #

在Screen1中通过navigation.navigate('Screen2', { fieldName: selectedField.name })传递参数，但Screen2中route.params为undefined，导致报错TypeError: Cannot read property 'fieldName' of undefined。

解决方案 #

1. 检查导航栈配置 #

确保Screen2在Stack Navigator中正确注册，且屏幕名称完全匹配（大小写敏感）。示例配置：

import { createStackNavigator } from '@react-navigation/stack';
const Stack = createStackNavigator();

function AppNavigator() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Screen1" component={Screen1} />
      {/* 确认name与navigate调用的名称一致 */}
      <Stack.Screen name="Screen2" component={Screen2} />
    </Stack.Navigator>
  );
}

2. 增加空值保护，避免崩溃并排查 #

修改Screen2的参数获取逻辑，用可选链和默认值处理空参数：

const Screen2 = ({ route }) => {
  const navigation = useNavigation();
  const params = route?.params || {};
  const fieldName = params.fieldName;
  console.log('Params:', params);
  
  return (
    <View>
      <Text style={{ fontSize: 24, fontWeight: 'bold' }}>
        Selected field: {fieldName || 'No field selected'}
      </Text>
      <Button onPress={() => navigation.goBack()} title="Go back" color="#662044" />
    </View>
  );
};

3. 使用useRoute钩子替代props接收 #

改用React Navigation提供的useRoute钩子获取路由信息，规避props传递可能的异常：

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

const Screen2 = () => {
  const navigation = useNavigation();
  const route = useRoute();
  const fieldName = route.params?.fieldName;
  
  return (
    <View>
      <Text style={{ fontSize: 24, fontWeight: 'bold' }}>
        Selected field: {fieldName || 'No field selected'}
      </Text>
      <Button onPress={() => navigation.goBack()} title="Go back" color="#662044" />
    </View>
  );
};

4. 排查Screen1中参数传递的有效性 #

确认点击TouchableOpacity时selectedField.name确实存在，避免竞态条件：

<TouchableOpacity
  onPress={() => {
    if (selectedField?.name) {
      navigation.navigate('Screen2', { fieldName: selectedField.name });
    } else {
      console.error('selectedField或selectedField.name未定义');
    }
  }}
>
  {/* 按钮内容 */}
</TouchableOpacity>

5. 尝试传递完整对象测试 #

暂时传递整个selectedField对象，验证参数是否能正常接收：

// Screen1
<TouchableOpacity
  onPress={() => {
    navigation.navigate('Screen2', { selectedField });
  }}
>

// Screen2
const Screen2 = ({ route }) => {
  const params = route?.params || {};
  const fieldName = params.selectedField?.name;
  // ...其余代码
};

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