Ionic 5应用前台运行时Firebase Cloud Messaging推送处理异常

代码问题分析 #

• 最可能的原因是通知属性取值路径错误：你监听回调拿到的notification本身就是PushNotificationSchema类型实例，该类型的title、body、data属性都是直接挂载在根节点下的，你代码中多嵌套了一层.notification，相当于访问不存在的notification.notification属性，触发空指针异常导致后续代码中断执行。你可以查看第一个alert打印的完整JSON结构，确认属性层级是否和你写的一致。
• 其次可能是this指向错误：如果你的回调函数没有正确绑定组件上下文，this.router会是undefined，触发报错。
• 路由跳转未处理异步：router.navigate是异步方法，未加await处理可能会产生非预期的异常。

Xcode报错定位方法 #

• 开启Xcode异常断点：打开Xcode左侧的断点导航面板，点击左下角的+号，选择「Exception Breakpoint」，保留默认配置即可。后续应用崩溃时会直接停在异常触发位置，展示完整的错误栈和报错描述。
• 调试WebView JS层：前台推送的处理逻辑跑在WebView中，用Safari开发者工具连接运行应用的iOS模拟器/真机，选择对应应用的WebView实例，就可以在JS控制台看到完整的JS报错信息，比Xcode原生日志更直观。
• 手动添加错误捕获：在推送回调外层包裹try/catch块，捕获到的异常直接打印或者弹窗展示，可以快速定位具体出错行。

修复示例代码 #

PushNotifications.addListener('pushNotificationReceived',
    async (notification : PushNotificationSchema) => {
      try {
        alert("Push received while app open: " + JSON.stringify(notification));
        
        // 用可选链避免空指针，按实际JSON结构调整属性路径
        const title = notification?.title;
        const body = notification?.body;
        const page = notification?.data?.department;

        alert ("Notification: department =  " + page + " Title : " + title);

        if (page){
          await this.router.navigate(['/'+page]);
        }
      } catch (err) {
        console.error('处理前台推送报错：', err);
        alert('处理推送出错：' + JSON.stringify(err));
      }
    },
);

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