Nuxt3 API GET函数无法获取动态参数问题求助

页面端（pages/[id].vue）： #

useFetch发送GET请求时，参数要放在query字段中（而非body），示例代码：

<script setup>
const { data: product } = await useFetch('/api/getProduct', {
  method: 'GET',
  query: { city: 'Paris' } // 定义GET查询参数
})
</script>

服务端API（server/api/getProduct.js）： #

Nuxt3的server API中，可通过getQuery(event)直接获取GET参数——GET请求无body，用readBody会触发405错误，示例代码：

export default defineEventHandler(event => {
  // 直接获取GET参数
  const { city } = getQuery(event)
  // 后续逻辑：比如用city参数查询Firebase
  return {
    success: true,
    city,
    message: '参数获取成功'
  }
})

Firebase客户端SDK仅能在浏览器环境运行，若在服务端执行初始化代码会触发报错，解决方式如下：

1. 改造Firebase初始化文件（lib/firebase.js）： #

添加process.client判断，仅在客户端初始化SDK：

import { initializeApp } from 'firebase/app'
import { getFirestore } from 'firebase/firestore'

const firebaseConfig = {
  // 你的Firebase配置信息
}

let firebaseApp
let db

// 仅在客户端初始化
if (process.client) {
  firebaseApp = initializeApp(firebaseConfig)
  db = getFirestore(firebaseApp)
}

export { db }

2. 创建客户端专属插件（plugins/firebase.client.js）： #

文件名后缀加.client，Nuxt会自动仅在客户端加载该插件，避免服务端执行：

import { db } from '~/lib/firebase'

export default defineNuxtPlugin(() => {
  return {
    provide: {
      firebaseDb: db
    }
  }
})

3. 在页面/Store中使用： #

通过useNuxtApp()获取注入的firebaseDb，确保仅在客户端执行：

<script setup>
const { $firebaseDb } = useNuxtApp()
// 仅在客户端操作Firebase
if (process.client) {
  // 示例：查询数据
  const docRef = doc($firebaseDb, 'products', 'xxx')
  const docSnap = await getDoc(docRef)
}
</script>

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