Next.js 13/14：带参数页面首屏加载慢且Loading未显示问题咨询

你的数据获取方式存在问题，这也是导致Loading页面未正常触发的核心原因，具体问题和修复方案如下：

1. 核心问题：getCoffeePlace函数返回类型不一致 #

你在getCoffeePlace中，当数据不存在时返回React组件<NotFoundCoffeePlace />，存在时返回Firestore数据对象，这种混合返回类型会引发两个关键问题：

• 后续JSON.parse(JSON.stringify(data))处理会直接报错（React组件无法被序列化为JSON），破坏页面渲染流程
• 干扰Next.js对页面异步数据加载状态的判断，导致Loading组件无法正确触发

2. 正确的实现方式 #

修正数据获取逻辑 #

应该让getCoffeePlace仅返回数据或null，将组件渲染逻辑移至Page组件中：

import fetchCoffeePlace from "@/api/fetchCoffeeplace"
import NotFoundCoffeePlace from "./components/NotFoundCoffeePlace"
import SingleCoffeePage from "./components/SingleCoffeePage"

async function getCoffeePlace(id: string) {
    // 仅返回数据或null，不返回组件
    const coffee = await fetchCoffeePlace(id)
    return coffee || null
}

export default async function Page({ params }: { params: { 'coffee': string } }) {
    const id = params['coffee']
    const data = await getCoffeePlace(id)

    // 在Page组件内判断是否渲染NotFound组件
    if (!data) {
        return <NotFoundCoffeePlace />
    }

    // 注意：若fetchCoffeePlace返回Firestore文档快照，直接用data.data()即可，无需全量JSON序列化
    // 若需处理Firestore特殊类型（如Timestamp），建议单独转换而非序列化整个对象
    const coffeeplace = JSON.parse(JSON.stringify(data))

    return (
        <SingleCoffeePage coffee={coffeeplace} />
    )
}

Loading组件触发的补充说明 #

Next.js的Loading组件会在客户端导航且页面异步数据加载中自动显示，但需满足：

• Loading组件需放在对应路由段的同级目录下（如app/coffee/[coffee]/loading.tsx），命名必须为loading.tsx/jsx
• 页面的异步数据获取需在Page组件顶层或Server Components的async函数中，无阻塞渲染的错误逻辑
• 首次跳转时客户端需加载页面JS bundle，若bundle较大可能有短暂延迟，但Loading组件仍应正常触发

若修正后仍未显示Loading，可排查：

• Loading组件的路径和命名是否符合要求
• fetchCoffeePlace是否存在不必要的同步阻塞逻辑
• 浏览器控制台是否有报错信息

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