为何在Firebase requestPermission后立即调用getToken常出现控制台报错？

嘿，这个问题我之前碰到过好多次！核心原因是requestPermission()是异步操作——它需要等待用户做出权限选择（允许/拒绝），如果你直接在它之后立刻调用getToken()，权限请求还没完成，Firebase Messaging还没准备好生成Token，自然会抛出错误。

修正后的代码示例 #

<script src="https://www.gstatic.com/firebasejs/4.12.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.12.1/firebase-messaging.js"></script>
<script>
  var config = {
    apiKey: "XXXXXXXXX",
    authDomain: "XXXXXXXXX.firebaseapp.com",
    databaseURL: "https://XXXXXXXXX.firebaseio.com",
    projectId: "XXXXXXXXX",
    storageBucket: "XXXXXXXXX.appspot.com",
    messagingSenderId: "XXXXXXXXX"
  };
  firebase.initializeApp(config);

  const messaging = firebase.messaging();

  // 关键：等待权限请求完成后再获取Token
  messaging.requestPermission()
    .then(() => {
      console.log('推送权限已授予');
      // 此时Firebase Messaging已就绪，安全调用getToken
      return messaging.getToken();
    })
    .then(token => {
      console.log('成功获取推送Token:', token);
      // 这里可以将Token发送到你的后端服务器存储
    })
    .catch(err => {
      console.error('权限请求或Token获取失败:', err);
      // 处理用户拒绝权限的情况，比如提示开启权限才能接收推送
    });
</script>

额外优化建议 #

• 提前判断权限状态：如果用户之前已经授予过权限，没必要重复请求，可以直接获取Token：

  if (Notification.permission === 'granted') {
    messaging.getToken().then(token => {
      console.log('已授权，直接获取Token:', token);
    });
  } else {
    messaging.requestPermission().then(...); // 权限未授予时发起请求
  }
  

• 检查Firebase配置：确保你的Firebase项目在控制台的「Cloud Messaging」模块中正确配置了Web推送证书（VAPID密钥），旧版本Firebase（如4.x）依赖这个配置，否则即使权限通过，也可能获取Token失败。

我当时踩这个坑的时候，也是急着把代码堆在一起，完全没考虑异步操作的执行顺序，后来把getToken()放到requestPermission()的then回调里就立刻解决了！

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