Next.js 15集成Supabase出现GET请求加载失败问题求助

问题描述 #

我在Next.js 15应用中使用Supabase处理认证与数据库交互，访问部分动态路由（如/docs/[url_slug]）及部分包含Supabase查询的非动态路由时，控制台会抛出类似Fetch failed loading: GET "http://localhost:3000/docs/astro?_rsc=1h5ff"的错误，但页面内容仍能正常加载。

动态路由页面（/docs/[url_slug]/page.tsx）代码如下：

import DocDetails from "@/components/docs-pages/doc-details";
import DocHeader from "@/components/docs-pages/doc-header";
import { createClient } from "@/utils/supabase/server";

export const dynamic = "force-dynamic";

export default async function LinkPage({ params }: { params: Promise<{ url_slug: string }> }) {
    try {
        const { url_slug } = await params;

        const supabase = createClient();
        const { data: link, error } = await (await supabase)
            .from("links")
            .select("*, categories(name)")
            .eq("url_slug", url_slug)
            .maybeSingle();

        if (error || !link) {
            console.error("Error fetching link data:", error);
            return <div>Error fetching data. Link not found.</div>;
        }

        return (
            <section>
                <DocHeader category={link.categories.name} name={link.name} />
                <DocDetails url={link.url} description={link.description} created_at={link.created_at} />
            </section>
        );
    } catch (error) {
        console.error("Error resolving params:", error);
        return <div>Error fetching data.</div>;
    }
}

我已尝试将数据库查询迁移至API路由、封装为外部函数，但问题依旧存在，求可行解决方案。

解决方案 #

1. 修正Supabase客户端初始化与调用逻辑 #

首先检查@/utils/supabase/server中的客户端创建代码，确保是Next.js App Router标准的服务器端实现：

import { createServerClient, type CookieOptions } from '@supabase/ssr'
import { cookies } from 'next/headers'

export const createClient = () => {
  const cookieStore = cookies()

  return createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        get(name: string) {
          return cookieStore.get(name)?.value
        },
        set(name: string, value: string, options: CookieOptions) {
          try {
            cookieStore.set({ name, value, ...options })
          } catch (error) {
            // 忽略服务器组件中设置cookie的错误
          }
        },
        remove(name: string, options: CookieOptions) {
          try {
            cookieStore.set({ name, value: '', ...options })
          } catch (error) {
            // 忽略服务器组件中移除cookie的错误
          }
        },
      },
    }
  )
}

关键修正：你的页面代码中对supabase实例使用了多余的await，标准客户端创建返回的是同步对象，无需await。修改查询代码：

// 原错误代码
const { data: link, error } = await (await supabase)
    .from("links")
    .select("*, categories(name)")
    .eq("url_slug", url_slug)
    .maybeSingle();

// 修改后
const { data: link, error } = await supabase
    .from("links")
    .select("*, categories(name)")
    .eq("url_slug", url_slug)
    .maybeSingle();

2. 修正动态路由参数类型 #

Next.js 15 App Router中，动态路由参数无需用Promise类型包装，直接解析为普通对象：

// 原类型定义
export default async function LinkPage({ params }: { params: Promise<{ url_slug: string }> }) {
    try {
        const { url_slug } = await params;

// 修改后
export default async function LinkPage({ params }: { params: { url_slug: string } }) {
    try {
        const { url_slug } = params;

3. 排查RSC请求错误细节 #

打开浏览器DevTools的Network面板，查看带_rsc参数的请求具体错误信息：

• 检查响应状态码（如404、500）
• 查看响应内容中的具体错误提示
• 确认页面中是否存在客户端组件重复发起服务器端已完成的查询，导致请求冲突

4. 检查Supabase RLS权限 #

登录Supabase控制台，确认links表的Row Level Security（RLS）规则是否允许服务器端查询获取数据。即使页面能加载，隐性的权限问题可能导致RSC请求的部分内容异常，触发控制台错误。

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