Next.js项目中使用Supabase TypeScript类型泛型传参报错求助

这个报错的核心原因是你封装的createClient函数没有定义泛型参数，导致调用时手动传入<Database>触发类型检查错误。正确的做法是在封装createClient时就把生成的Database类型集成进去，而非调用时传泛型。

步骤1：检查并修正Supabase客户端封装 #

打开@/utils/supabase/server.ts，确保封装时已经将Database类型传入底层的Supabase客户端构造函数：

import { createServerClient, type CookieOptions } from '@supabase/ssr'
import { type Database } from '@/types/supabase'
import { type RequestCookies } from 'next/dist/compiled/@edge-runtime/cookies'

export function createClient(cookies: () => RequestCookies) {
  // 在这里将<Database>传入createServerClient
  return createServerClient<Database>(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        get(name: string) {
          return cookies().get(name)?.value
        },
        set(name: string, value: string, options: CookieOptions) {
          try {
            cookies().set({ name, value, ...options })
          } catch (error) {
            // 忽略SSR时的Cookie操作错误
          }
        },
        remove(name: string, options: CookieOptions) {
          try {
            cookies().set({ name, value: '', ...options })
          } catch (error) {
            // 忽略SSR时的Cookie操作错误
          }
        },
      },
    }
  )
}

如果是浏览器端的客户端封装（@/utils/supabase/client.ts），写法类似：

import { createBrowserClient } from '@supabase/ssr'
import { type Database } from '@/types/supabase'

export function createClient() {
  return createBrowserClient<Database>(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
  )
}

步骤2：调用createClient时无需传泛型 #

修正封装后，直接调用createClient()即可获得完整的类型安全性，无需手动传入<Database>：

import { createClient } from "@/utils/supabase/server";
import { cookies } from 'next/headers'

export async function myFunction() {
  const supabase = createClient(cookies);
  // 此时supabase已自动带有Database的类型提示
}

这样既解决了类型报错，又保留了Supabase提供的类型安全能力。

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