如何在SvelteKit组件中借助Supabase与Auth Helpers获取数据

错误原因 #

你遇到的错误是因为data.supabase未定义，说明组件接收的data对象里没有传入supabase实例——要么是页面数据文件（+page.ts/+page.server.ts）里没返回supabase，要么是组件的data props没有正确获取到值。

解决方案 #

方案1：在页面数据中传入supabase实例

首先确保你的+page.server.ts（或+page.ts）中正确获取supabase实例并返回给页面data：

// +page.server.ts
import type { PageServerLoad } from './$types';
import { supabaseServerClient } from '@supabase/auth-helpers-sveltekit';

export const load: PageServerLoad = async ({ locals }) => {
  const supabase = supabaseServerClient(locals);
  return { supabase };
};

这样Component.svelte中接收的data就会包含supabase实例，调用时就不会报错。

方案2：直接在组件中导入supabase实例（更适合客户端操作）

如果你的组件是客户端组件（不需要服务器端渲染），可以直接从supabase初始化文件中导入实例，不用通过page data传递：

// Component.svelte
import { supabase } from '$lib/supabase'; // 假设你在lib目录下初始化了supabase
// 若不需要其他page data，可移除原来的export let data: PageData;

async function findFirm() {
  console.log('QUERYING FIRM DATABASE');
  const { data: firm, error } = await supabase
    .from('firms')
    .select('id, firm_name,firm_address')
    .eq('id', firmPassword);
  
  // 后续逻辑保持不变...
}

这种方式更直接，避免了props传递的问题。

方案3：通过页面组件传递处理函数

如果你想把数据请求逻辑放在+page.svelte中，再让子组件调用，可以在页面组件中定义处理函数，通过props传给子组件：

// +page.svelte
import Component from './Component.svelte';
import { supabase } from '$lib/supabase';

async function handleFindFirm(firmPassword: string) {
  const { data: firm, error } = await supabase
    .from('firms')
    .select('id, firm_name,firm_address')
    .eq('id', firmPassword);
  return { firm, error };
}

然后在子组件中接收这个函数：

// Component.svelte
export let findFirmHandler: (password: string) => Promise<{ firm: any; error: any }>;

async function findFirm() {
  console.log('QUERYING FIRM DATABASE');
  const { firm, error } = await findFirmHandler(firmPassword);
  
  // 后续逻辑保持不变...
}

在页面组件中使用子组件时传入函数：

<Component findFirmHandler={handleFindFirm} />

额外注意点 #

• 确保firmPassword变量在组件中已正确定义（比如用let firmPassword = ''或者绑定到输入框的bind:value）
• 优化错误处理逻辑：当前代码未捕获error存在但firm为空的情况，建议先判断error再处理数据：

if (error) {
  console.error('数据库查询错误:', error);
  invalidPassword = true;
  return;
}
if (firm && firm.length > 0) {
  // 处理获取到的firm数据
} else {
  invalidPassword = true;
}

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