如何让带Slug的多URL指向同一HTML页面并加载对应Firestore数据

要实现所有形如Domain.com/[slug]的路径都指向同一个index.html，同时提取slug加载对应Firestore数据，需要分两步处理：服务器端路由重写和前端逻辑处理。

一、配置服务器端路由重写 #

不同托管环境的配置方式不同，核心是让所有非静态文件的请求都转发到index.html：

Firebase Hosting（若使用Firebase托管） #

修改项目根目录的firebase.json，添加重写规则：

{
  "hosting": {
    "public": "public",
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

该规则会将所有请求（已存在的静态文件如CSS、JS除外）导向index.html。

Nginx #

在站点配置中添加try_files指令：

location / {
  try_files $uri $uri/ /index.html;
}

Nginx会先尝试访问请求的文件或目录，不存在则返回index.html。

Apache #

在项目根目录创建.htaccess文件，添加重写规则：

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

规则会排除已存在的文件和目录，其余请求均转发到index.html。

二、前端提取URL中的Slug #

在单HTML文件中用JavaScript提取路径中的slug：

// 获取当前路径，示例："/bobs-store"
const pathname = window.location.pathname;
// 去除开头斜杠，得到纯slug："bobs-store"
const slug = pathname.replace(/^\/+/, '');

// 处理空路径场景（如用户直接访问Domain.com）
if (!slug) {
  console.log('请输入有效的店铺Slug');
}

三、通过Slug加载Firestore数据 #

拿到slug后，直接查询Firestore中对应slug的文档：

// 假设数据存储在"stores"集合下，每个文档含"slug"字段
import { initializeApp } from "firebase/app";
import { getFirestore, doc, getDoc } from "firebase/firestore";

// 初始化Firebase（替换为你的配置）
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

async function loadStoreData(slug) {
  try {
    // 查询stores集合中slug匹配的文档
    const storeDocRef = doc(db, "stores", slug);
    const storeDoc = await getDoc(storeDocRef);
    
    if (storeDoc.exists()) {
      const storeData = storeDoc.data();
      // 将数据渲染到页面，示例填充店铺名称、描述
      document.getElementById('store-name').textContent = storeData.name;
      document.getElementById('store-desc').textContent = storeData.description;
    } else {
      console.log('未找到该店铺');
    }
  } catch (error) {
    console.error('加载数据失败:', error);
  }
}

// 页面加载完成后执行逻辑
window.addEventListener('load', () => {
  const pathname = window.location.pathname;
  const slug = pathname.replace(/^\/+/, '');
  if (slug) {
    loadStoreData(slug);
  }
});

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