NextJS使用next-firebase-auth-edge时Firestore刷新后权限不足及Service Worker语法错误求助

看起来你遇到了两个关联的问题，我来帮你一步步解决：

首先解决Service Worker的import语法错误 #

Service Worker默认不是ES模块环境，直接用import会触发语法错误，有两种简单的解决方式：

方案1：注册Service Worker时指定模块类型 #

在你注册Service Worker的代码（比如_app.js或者专门的注册脚本）里，加上type: 'module'参数：

navigator.serviceWorker.register('/auth-service-worker.js', { type: 'module' })

这种方式简洁高效，适合现代浏览器（Chrome 91+、Firefox 102+均支持），如果你的项目不需要兼容旧浏览器，优先选这个方案。

方案2：改用importScripts加载Firebase脚本 #

如果需要兼容更多浏览器，改用Firebase的UMD版本，通过importScripts在Service Worker中加载：

// 替换原来的import语句
importScripts('https://www.gstatic.com/firebasejs/9.23.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/9.23.0/firebase-auth.js');

// 用全局firebase对象初始化
const app = firebase.initializeApp(config);
const auth = firebase.auth(app);

记得替换成你实际使用的Firebase版本号，这样就能避开import语法的限制了。

然后解决刷新后Firestore权限不足的问题 #

这个问题的核心有两个：一是Service Worker没给Firestore请求加认证token，二是刷新页面时token获取不及时。我们逐个解决：

1. 修改Service Worker的请求过滤逻辑 #

你原来的代码只给同域名的请求加token，但Firestore请求是发向firestore.googleapis.com的，所以根本没被处理！修改fetch监听里的条件，把Firestore域名加入允许列表：

// 替换原来的origin判断逻辑
const allowedOrigins = [
  self.location.origin,
  'https://firestore.googleapis.com' // 新增Firestore的域名
];

if (allowedOrigins.includes(getOriginFromUrl(evt.request.url)) &&
    (self.location.protocol === 'https:' || self.location.hostname === 'localhost') &&
    idToken) {
  // 继续执行添加Authorization头的逻辑
}

2. 优化Token获取逻辑，确保刷新时能拿到有效token #

原来的getIdTokenPromise只在Auth状态第一次变化时获取token，刷新页面时Firebase Auth初始化可能还没完成，导致拿到null。调整逻辑，优先用当前用户的token，再监听状态：

const getIdTokenPromise = () => {
  return new Promise((resolve) => {
    // 如果当前已有用户，强制刷新token并返回
    if (auth.currentUser) {
      auth.currentUser.getIdToken(true) // true表示强制刷新，避免使用过期token
        .then(resolve)
        .catch(() => resolve(null));
      return;
    }

    // 否则等待Auth状态初始化完成
    const unsubscribe = onAuthStateChanged(auth, (user) => {
      unsubscribe();
      if (user) {
        user.getIdToken(true).then(resolve).catch(() => resolve(null));
      } else {
        resolve(null);
      }
    }, () => resolve(null));
  });
};

3. 结合next-firebase-auth-edge的特性优化认证流程 #

next-firebase-auth-edge是在服务器端（Edge层）处理会话的，如果你觉得客户端认证还是不稳定，可以考虑通过NextJS API路由代理Firestore请求：

• 在API路由中用getUser方法从next-firebase-auth-edge获取当前用户
• 用Firebase Admin SDK直接操作Firestore（Admin SDK不受前端规则限制，你可以在服务器端做权限校验）
• 客户端调用这个API路由，而不是直接请求Firestore

这种方式完全依赖服务器端的会话，能彻底避免客户端Auth状态不一致的问题。

按照上面的步骤调整后，应该就能解决刷新页面后Firestore权限不足的问题了。如果还有问题，可以检查浏览器Network面板里的Firestore请求头，确认Authorization头是否正确携带了token。

备注：内容来源于stack exchange，提问作者Musab Gulfam