Expo Router页面导航参数传递异常问题排查求助

1. 核对导航端的参数拼写与格式 #

• 确保导航代码里的参数键名（table_id、user_id）和接收端完全一致，包括大小写、下划线，比如别把table_id写成tableId。
• 导航前强制打印参数值，比如console.log('导航参数：', bar_id, table_id, user_id)，确认这两个值确实不是隐性的undefined或null。
• 查看最终生成的路由URL，比如在Web端看地址栏，或用React Native调试工具查看路由栈，确认URL是否包含&table_id=xxx&user_id=xxx的片段。

2. 检查目标页面的接收逻辑 #

• 确认useLocalSearchParams()是在路由页面/布局组件内部调用的，Expo Router的路由钩子不能在非路由组件、自定义Hook的外层使用。
• 用完整打印的方式查看返回的参数对象：console.log('所有查询参数：', useLocalSearchParams())，确认table_id和user_id是否存在于返回对象中。
• 解构时直接设置默认值，避免键不存在导致的undefined：

  const { bar_id = '', table_id = '', user_id = '' } = useLocalSearchParams();
  

3. 排查路由配置冲突 #

• 检查目标页面的路由是否包含动态路由参数，比如如果路由是/bars/[table_id]，那table_id会被识别为动态路由参数，需要用useRouteParams()接收，而非useLocalSearchParams()。
• 确认没有全局路由拦截器、中间件（比如权限校验逻辑）修改或过滤了查询参数。

4. 最小复现测试 #

• 写一个极简的测试场景：在首页用硬编码参数跳转，比如：

  import { Link } from 'expo-router';
  
  // 首页组件内
  <Link href={{ pathname: '/target', query: { bar_id: '123', table_id: '456', user_id: '789' } }}>
    测试跳转
  </Link>
  

• 如果这个场景能正常接收所有参数，说明你的业务代码中存在干扰参数传递的逻辑（比如参数被异步修改、状态覆盖等）。

1. 区分查询参数与动态路由参数 #

• 查询参数（query）：用于可选、非必需的临时参数（比如筛选条件），用useLocalSearchParams()接收。
• 动态路由参数（params）：用于标识唯一资源的必需参数（比如资源ID），路由格式为/bars/[bar_id]/tables/[table_id]，用useRouteParams()接收，这种方式更规范，也避免参数丢失。

2. 导航的正确写法 #

Link组件跳转 #

import { Link } from 'expo-router';

<Link 
  href={{ 
    pathname: '/your-target-page', 
    query: { bar_id: '1', table_id: '2', user_id: '3' } 
  }}
>
  跳转到目标页
</Link>

编程式导航 #

import { router } from 'expo-router';

const handleNavigate = () => {
  router.push({
    pathname: '/your-target-page',
    query: { bar_id: '1', table_id: '2', user_id: '3' }
  });
};

3. 参数类型处理 #

查询参数默认都是字符串类型，接收后需手动转换为所需类型：

const { bar_id, table_id, user_id } = useLocalSearchParams();
const barId = parseInt(bar_id, 10);
const tableId = parseInt(table_id, 10);
const userId = parseInt(user_id, 10);

4. 避免传递复杂数据 #

查询参数仅适合传递简单的字符串/数字，不要传递对象、数组等复杂数据（会被强制序列化，容易出错）。如需传递复杂数据，建议用全局状态管理（如Zustand、Redux）或AsyncStorage。

5. 调试技巧 #

• 开发模式下，用React Native Debugger查看路由栈的query字段，确认参数是否正确传递。
• 导航前后打印参数，追踪参数流转路径，定位问题节点。

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