使用next-intl+Next.js动态页+Firebase时遇React报错：Expected a suspended thenable

以下是几个针对性的排查和解决方向：

• 检查服务端数据获取的Promise处理
  确保在服务端渲染路径（比如generateStaticParams、服务端组件、generateMetadata）中，所有Firebase异步调用都用await处理，不能直接返回未resolved的Promise。比如调用Firebase的getDoc或collection().get()时，必须加await，否则React Suspense无法正确识别这个异步操作，触发报错。

• 验证next-intl的服务端配置规范
  如果用App Router，确认layout.tsx中的next-intl Provider正确包裹页面，且服务端获取locale是同步的（比如直接从params.locale读取），不要在服务端异步获取locale。另外，服务端组件中必须使用getTranslations()而非客户端的useTranslations()，且要确保await getTranslations()，避免返回Promise给React渲染流程。

• 排查React Suspense的误用
  动态页面中如果使用了Suspense组件，要确保符合React 18+的使用规范，不要在服务端渲染路径中嵌套Suspense或触发未预期的Suspense场景。Firebase的服务端Promise如果未被await，可能会意外触发Suspense，但React期望的是特定结构的suspended thenable，这就会导致报错。

• 排查依赖版本兼容性
  可能是next-intl、Next.js、Firebase SDK之间的版本冲突：

  • 尝试将next-intl降级到近期的稳定版本（比如3.x系列），或者升级到最新兼容Next.js App Router的版本；
  • 确保服务端使用firebase-admin而非客户端的firebase包，避免客户端API在服务端运行的兼容性问题；
  • 升级Next.js到最新稳定版，修复可能存在的Suspense相关bug。

• 简化代码定位冲突点
  把[pid]页面代码简化到最小单元：

  1. 先移除所有next-intl相关代码，只保留Firebase服务端数据获取逻辑，确认页面是否正常渲染；
  2. 如果正常，再逐步引入next-intl的服务端翻译逻辑（比如await getTranslations()），观察什么时候触发报错，定位具体的冲突代码。

内容的提问来源于stack exchange，提问作者List To Profit