React Navigation 6中navigation.navigate无法跳转页面求助

针对你遇到的onSnapshot回调中调用navigation.navigate无反应、终端无报错的情况，可尝试以下几种排查和解决方式：

1. 确保导航实例的有效性 #

如果navigation2是通过组件props传递的，异步回调中可能会引用到旧的实例。改用useNavigation钩子获取导航实例，配合useRef保存避免实例过时：

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

// 组件内部代码
const navigation = useNavigation();
const navigationRef = useRef(navigation);

useEffect(() => {
  navigationRef.current = navigation;
}, [navigation]);

const imTired = (quiz) => {
  navigationRef.current.navigate("Quiz", {
    host: index === 0 ? true : false,
    code: code,
    index: index,
    color: "#fff",
    qn: 15,
    comp: true,
    quiz: quiz,
  });
};

2. 使用导航容器的全局引用 #

通过NavigationContainer的ref直接控制导航，不受组件上下文限制：

首先在导航配置文件中创建全局ref：

import { NavigationContainer } from '@react-navigation/native';
import React from 'react';

export const navigationRef = React.createRef();

export function navigate(name, params) {
  navigationRef.current?.navigate(name, params);
}

// 绑定ref到导航容器
<NavigationContainer 
  ref={navigationRef}
  theme={theme === "dark" ? DarkTheme : DefaultTheme}
>
  {/* 现有导航配置 */}
</NavigationContainer>

然后在组件中导入使用：

import { navigate } from './path-to-your-navigation-config';

const imTired = (quiz) => {
  navigate("Quiz", {
    host: index === 0 ? true : false,
    code: code,
    index: index,
    color: "#fff",
    qn: 15,
    comp: true,
    quiz: quiz,
  });
};

3. 确保回调在React更新周期内执行 #

Firestore的onSnapshot回调运行在React更新周期外，用useCallback包裹导航函数，并清理订阅避免无效执行：

import { useCallback, useEffect } from 'react';

// 用useCallback包裹导航函数，确保依赖正确
const imTired = useCallback((quiz) => {
  navigation.navigate("Quiz", {
    host: index === 0 ? true : false,
    code: code,
    index: index,
    color: "#fff",
    qn: 15,
    comp: true,
    quiz: quiz,
  });
}, [navigation, index, code]);

// 组件挂载时订阅，卸载时清理
useEffect(() => {
  const unsubscribe = onSnapshot(doc(db, `Competitions/${code}`), (document) => {
    // 现有逻辑
  });

  return () => unsubscribe();
}, [code]);

4. 验证导航参数和路由名称 #

• 确认路由名称大小写完全匹配（React Navigation路由名区分大小写）
• 排查传递的参数是否存在循环引用或无法序列化的内容，可先简化参数测试：

navigation.navigate("Quiz", { test: "demo" });

若能正常跳转，再逐步添加原参数定位问题。

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