Expo Router中router.push传递动态参数失效问题求助

问题场景 #

使用Expo SDK 49搭配Expo Router 2.0.0时，遇到导航异常：

• 通过Formik获取的动态values.phone作为参数调用router.push，页面完全不跳转
• 直接传入静态字符串（比如'+1 (920) 123-4567'）时，导航正常工作
• 两种场景下console.log(values.phone)都能输出正确的手机号内容

不生效代码 #

const handleSubmit = (values) => {
  SMSLogin({ variables: values }).then(({ data, errors }) => {
    console.log(values.phone)
    router.push({
      pathname: "/sign-up-completion",
      params: {
        phone: values.phone,
      },
    });
  });
};

生效代码 #

const handleSubmit = (values) => {
  SMSLogin({ variables: values }).then(({ data, errors }) => {
    console.log(values.phone)
    router.push({
      pathname: "/sign-up-completion",
      params: {
        phone: '+1 (920) 123-4567',
      },
    });
  });
};

问题原因分析 #

最常见的两个触发原因：

1. 参数类型不匹配
   Expo Router的路由参数本质是URL的一部分，要求必须是字符串类型。但Formik的values.phone可能是数字类型（比如表单组件自动将用户输入的手机号转为数字），虽然console.log会自动把数字转成字符串显示，但实际传入router.push的是数字值，导致路由解析失败，无法触发导航。

2. 参数包含隐形字符
   values.phone可能带有空格、换行符这类隐形字符，console.log不会显示这些字符，但实际参数里存在，导致路由无法匹配到目标页面。比如用户输入手机号时不小心加了前后空格，或者表单组件没有做自动去空格处理。

验证与解决方法 #

先在代码里加日志确认参数类型和真实内容：

console.log(values.phone, typeof values.phone, values.phone.length)

如果是类型问题，把参数强制转为字符串：

phone: String(values.phone)

如果是隐形字符问题，用trim()处理：

phone: values.phone.trim()

合并处理的示例代码：

const handleSubmit = (values) => {
  SMSLogin({ variables: values }).then(({ data, errors }) => {
    const cleanPhone = String(values.phone).trim()
    router.push({
      pathname: "/sign-up-completion",
      params: {
        phone: cleanPhone,
      },
    });
  });
};

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