React Native 导航报Cannot read 'catch' of undefined：路由正常仍抛错

在应用中实现了从Async Storage加载完成目标数据后触发路由重定向的逻辑，实际路由跳转功能完全符合预期，可正常执行页面切换，但控制台仍持续输出本地存储读取相关的错误日志，对应实现代码如下：

useEffect(() => {
        loadData(localStorageKeys.USER_LOGGED_IN, true)
            .then(isUserLoggedIn => {
                    if (isUserLoggedIn) {
                        props.navigation.navigate(NavigationLocations.DASHBOARD)
                            .catch(e => logNavigationError(e))
                    } else {
                        console.log("No user is signed in.");
                        console.log(AsyncStorage.getAllKeys());
                    }
                }
            )
            .catch(e => {
                console.error("Unable check locally if user is logged in.");
                debugger
                console.error(e);
            });
    }, []);

控制台错误表现 #

实际输出的错误堆栈如下：

index.js:1 Unable check locally if user is logged in.
console.<computed> @ index.js:1
(anonymous) @ Signup.js:32
Promise.catch (async)
(anonymous) @ Signup.js:29
...

问题成因 #

这种“路由功能完全正常却触发错误捕获”的现象，核心是对非Promise返回值的方法错误链式调用，触发的同步错误沿Promise链被外层catch捕获，具体逻辑链条如下：

• props.navigation.navigate()的核心路由跳转逻辑，在函数体执行阶段就已经完成，因此你能观察到页面跳转完全符合预期，没有功能层面的异常
• 当前使用的React Navigation版本中，navigate()方法的返回值为void，并非Promise。当你给这个无返回值的结果链式调用.catch()方法时，代码会在同步执行阶段抛出Cannot read properties of undefined (reading 'catch')的类型错误
• 由于这个同步错误发生在.then()的回调函数内部，会沿着Promise调用链自动向上冒泡，被最外层绑定的.catch()捕获，最终打印出“Unable check locally if user is logged in.”的错误日志，形成“明明是路由操作触发的错误，却被当成存储读取错误上报”的假象

其他可对照排查的场景 #

除了上述核心成因，还有两类情况可能触发同类现象：

• 若使用的React Navigation版本中navigate()确实返回Promise，但绑定的logNavigationError函数在执行过程中抛出未捕获的同步错误，该错误同样会向上冒泡到外层catch，触发错误日志打印
• 部分场景下调用navigate()时，目标路由和当前所在路由完全一致，即使页面跳转逻辑正常触发，后续返回的Promise可能抛出重复导航的提示，若对应的catch处理器没有正确拦截异常，也会触发错误冒泡

临时修复方向：移除对navigate()的链式catch调用，将导航逻辑拆分为独立的同步调用；若需要捕获导航异常，可先通过类型校验确认导航方法返回值为Promise后再绑定错误处理器。

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