Expo Router调用setParams()报“无法在屏幕外调用”错误求助

云原生阿岚

2026-6-29

解决Expo Router中router.setParams()报错“Cannot call setParams outside a screen”的方法

1. 确认`useRouter()`的调用位置

必须在屏幕组件内部直接调用useRouter()，不能在嵌套的非屏幕组件、全局工具函数或未在屏幕内触发的自定义Hook中使用。比如把useRouter()抽离到单独文件导出再调用，就会触发该错误。

正确示例：

// app/page.tsx
import { useRouter } from 'expo-router';
import { TextInput } from 'react-native';

export default function Page() {
  const router = useRouter();

  return (
    <TextInput
      onChangeText={(text) => router.setParams({ query: text })}
      placeholder="输入测试内容"
    />
  );
}

2. 检查`_layout.tsx`的路由配置

确保Stack布局层级正确，Stack.Screen的name属性与屏幕组件的路径完全匹配：

如果屏幕在根目录app/page.tsx，name写page；
如果在子目录app/home/page.tsx，name要写home/page。

正确配置示例：

// app/_layout.tsx
import { Stack } from 'expo-router';

export default function RootLayout() {
  return (
    <Stack>
      <Stack.Screen name="page" />
    </Stack>
  );
}

3. 升级Expo Router到稳定版

部分旧版本存在setParams上下文检测bug，执行以下命令升级相关依赖：

npx expo install expo-router@latest react-native-safe-area-context@latest react-native-screens@latest

4. 避免在异步操作中使用闭包过期的router实例

如果在useEffect异步回调、定时器或Promise中调用setParams，用useRef保存router实例，避免闭包导致的上下文失效：

import { useRouter, useRef, useEffect } from 'expo-router';

export default function Page() {
  const router = useRouter();
  const routerRef = useRef(router);

  useEffect(() => {
    routerRef.current = router;
    fetch('/api/data').then((res) => {
      routerRef.current.setParams({ dataId: res.id });
    });
  }, []);
}