Expo Router点击Firebase FCM推送通知无法跳转页面求助

核心原因 #

FCM与Expo推送服务的消息结构存在差异，Expo推送工具直接适配了Expo Notifications SDK的解析逻辑，而FCM原生消息的data字段位置可能与预期不符，导致路由跳转逻辑无法取到正确的路径。

分步排查与修复 #

1. 规范FCM消息发送格式 #

FCM分通知消息和数据消息两种类型，需确保url字段放在正确位置：

• 若发送通知消息（前台/后台均显示通知），data字段需放在请求体根节点，示例：

{
  "to": "FCM_DEVICE_TOKEN",
  "notification": {
    "title": "测试标题",
    "body": "点击跳转至指定页面"
  },
  "data": {
    "url": "/path"
  }
}

• 若通过Firebase控制台发送，在「自定义数据」模块添加键为url、值为/path的条目。

2. 确认通知数据的实际结构 #

在通知接收监听中打印完整结构，定位url字段的真实位置：

notificationListener.current = Notifications.addNotificationReceivedListener((notification) => {
  setNotification(notification);
  console.log("完整通知结构:", JSON.stringify(notification, null, 2));
});

根据打印结果，调整redirect函数的取值路径。

3. 兼容两种推送来源的redirect函数 #

修改redirect函数，同时支持Expo推送和FCM推送的data字段位置：

function redirect(notification) {
  // 依次尝试可能的字段位置
  let url = notification?.request?.content?.data?.url;
  url = url || notification?.data?.url;
  url = url || notification?.request?.data?.url;

  if (url) {
    console.log("跳转至:", url);
    router.push(url);
  } else {
    console.log("通知中未找到有效URL");
  }
}

4. 处理应用冷启动场景 #

当应用完全关闭时，点击FCM通知启动应用，需通过getInitialNotificationAsync获取初始通知并处理跳转：

useEffect(() => {
  let isMounted = true;

  // 新增：处理冷启动时的通知跳转
  const handleInitialNotification = async () => {
    const initialNotification = await Notifications.getInitialNotificationAsync();
    if (isMounted && initialNotification?.notification) {
      redirect(initialNotification.notification);
    }
  };

  handleInitialNotification();

  // 原有的fetchData、监听注册等逻辑...
}, []);

5. 确认FCM令牌正确性 #

发送FCM消息必须使用设备原生FCM令牌，而非Expo推送令牌，可通过以下代码获取：

async function getFCMToken() {
  const { data: token } = await Notifications.getDevicePushTokenAsync();
  console.log("FCM原生令牌:", token);
  return token;
}

验证步骤 #

1. 发送FCM通知后，查看控制台打印的完整结构，确认url字段存在
2. 点击通知，检查redirect函数是否打印正确的跳转路径
3. 分别测试应用前台、后台、完全关闭三种状态下的跳转效果

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