Firebase Rewrites配置异常：React环境下静态HTML页面未正常加载

核心问题：重写规则优先级错误 #

Firebase Hosting的重写规则是从上到下匹配的，如果你的React应用对应的通配规则（"source": "**"）放在了自定义规则的前面，所有请求都会先匹配到React的index.html，你的自定义规则根本不会生效。

修正步骤： #

打开你的firebase.json，找到hosting下的rewrites数组，把自定义路径规则移到React通配规则的前面，确保它先被匹配：

{
  "hosting": {
    "public": "build", // 这里是你的React构建目录
    "rewrites": [
      // 自定义规则放前面
      {
        "source": "/:order_id/:item_id/:side",
        "destination": "/redirect.html"
      },
      // React的通配规则放后面
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

其他可能的排查点： #

• 确认redirect.html确实在Firebase Hosting的public目录（即React的build目录）下，部署时没有被遗漏。
• 部署后强制刷新浏览器（Ctrl+Shift+R），避免缓存旧的页面规则。
• 重新部署规则：执行firebase deploy --only hosting确保规则生效，不要只部署代码。

本地验证方法 #

用Firebase CLI的本地测试功能，运行firebase serve，在本地访问http://localhost:5000/PHD6sb8NYHpW33/csi/l，看是否能正确加载redirect.html，这样能快速排查规则是否正确，不用每次都部署到线上。

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