返回页面时触发TypeError: undefined is not an object错误的解决办法

错误根源 #

这个报错是因为返回该页面时route.params为undefined，直接解构useremail和userVerificationCode就会触发类型错误。常见场景：

• 页面内的「Go Back」按钮用navigation.navigate跳转回邮箱页后，再通过设备返回键回到验证页，此时验证页是重新加载的，没有携带参数；
• 其他未通过正常参数传递流程进入该页面的情况。

修复步骤 #

1. 给参数解构加兜底，避免直接访问undefined #

修改参数获取逻辑，用空对象兜底，防止解构失败：

const { useremail, userVerificationCode } = route.params || {};

或者用可选链更严谨地获取：

const useremail = route.params?.useremail;
const userVerificationCode = route.params?.userVerificationCode;

2. 修复返回按钮逻辑，保持栈状态正常 #

原返回按钮用navigation.navigate会新增一个邮箱页实例，导致栈结构混乱。改用goBack()直接返回上一页，保留原有页面状态：

<TouchableOpacity onPress={() => navigation.goBack()} style={goback}>
  <AntDesign name="arrowleft" size={24} color="grey" />
  <Text style={{ color: 'grey', fontSize: 16, marginLeft: 5, fontWeight: 'bold' }}>Go Back</Text>
</TouchableOpacity>

3. 给核心逻辑加参数校验，避免后续报错 #

在验证码校验函数里先检查参数是否存在，防止空值引发后续错误：

const handleVerificationCode = () => {
  if (!useremail || !userVerificationCode) {
    alert('页面参数异常，请重新发起验证');
    navigation.navigate('forgetpassword_email');
    return;
  }

  if (verificationCode !== userVerificationCode) {
    alert('Invalid Verification Code');
  } else {
    alert('Verification Code Matched');
    navigation.navigate('forgetpassword_choose_newpassword', { email: useremail });
  }
}

4. 验证跳转时的参数传递是否正确 #

在邮箱页的请求回调里加日志，确认后端返回的字段是否正确，避免传递空参数：

.then(data => {
  console.log('后端返回数据:', data); // 确认data里的email和VerificationCode字段存在
  if (data.error === "User not found with this email") {
    alert('User not found with this email');
    setLoading(false);
  } else if (data.message === "Verification Code Sent to your Email") {
    setLoading(false);
    alert(data.message);
    navigation.navigate('forgetpassword_verify', {
      useremail: data.email,
      userVerificationCode: data.VerificationCode
    });
  }
})

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