SvelteKit客户端向服务端传参异常：Supabase查询无法获取参数

你的核心问题在于对SvelteKit的load函数机制理解有误，同时参数传递方式不符合框架规范，以下是具体修正方案：

核心问题点 #

1. 客户端不能直接调用+page.server.js中的load函数，该函数仅在服务端渲染/路由加载阶段由SvelteKit自动执行，并非客户端可调用的全局函数。
2. +page.server.js的load函数接收的是Event对象，而非直接的dog参数，需从event中提取参数（查询参数/路由参数）。
3. 客户端传递参数时未做编码处理，可能导致特殊字符传递失败。

方案一：通过URL查询参数传递（复用+page.server.js） #

修正+page.server.js #

import supabase from "../../lib/db";

export const load = async (event) => {
  // 从URL查询参数中获取犬种值
  const dog = event.url.searchParams.get('dog');
  if (!dog) return { metrics: [] };

  try {
    const { data, error } = await supabase
      .from("dogs")
      .select(
        "avg_size, avg_obedience, avg_compassion, avg_health, avg_cleanliness, avg_energy"
      )
      .eq("Breed", dog);
    
    if (error) throw error;
    return { metrics: data };
  } catch (e) {
    console.error('查询失败:', e);
    return { metrics: [] };
  }
};

修正+page.svelte #

使用SvelteKit内置的useAsyncData或直接fetch获取数据，避免直接调用load函数：

<script>
  import { onMount } from 'svelte';
  import { useAsyncData } from '$app/navigation';

  // 假设这里是你客户端定义的犬种参数
  let dog_val = '金毛';
  let metrics;

  // 方式1：用useAsyncData自动处理服务端/客户端数据同步
  const { data: loadedMetrics } = useAsyncData('dog-metrics', async () => {
    const res = await fetch(`/?dog=${encodeURIComponent(dog_val)}`);
    const data = await res.json();
    return data.metrics;
  });
  metrics = loadedMetrics;

  // 方式2：在onMount中手动fetch
  // onMount(async () => {
  //   const res = await fetch(`/?dog=${encodeURIComponent(dog_val)}`);
  //   const data = await res.json();
  //   metrics = data.metrics;
  // });
</script>

{#if metrics}
  {#each metrics as item}
    <div>平均体型：{item.avg_size}</div>
    <div>服从度均值：{item.avg_obedience}</div>
    <div>友善度均值：{item.avg_compassion}</div>
    <div>健康度均值：{item.avg_health}</div>
    <div>整洁度均值：{item.avg_cleanliness}</div>
    <div>精力均值：{item.avg_energy}</div>
  {/each}
{:else}
  <p>加载中...</p>
{/if}

方案二：创建独立API路由（更灵活的客户端数据请求） #

如果需要更灵活的接口调用，可创建API路由专门处理数据查询：

创建/api/dogs/metrics/+server.js #

import supabase from "../../../lib/db";

export async function GET({ url }) {
  const dog = url.searchParams.get('dog');
  if (!dog) {
    return new Response(JSON.stringify({ error: '缺少犬种参数' }), { status: 400 });
  }

  try {
    const { data, error } = await supabase
      .from("dogs")
      .select(
        "avg_size, avg_obedience, avg_compassion, avg_health, avg_cleanliness, avg_energy"
      )
      .eq("Breed", dog);
    
    if (error) throw error;
    return new Response(JSON.stringify({ metrics: data }), { status: 200 });
  } catch (e) {
    console.error('查询失败:', e);
    return new Response(JSON.stringify({ error: '服务器内部错误' }), { status: 500 });
  }
}

客户端调用（+page.svelte） #

<script>
  import { onMount } from 'svelte';

  let dog_val = '金毛';
  let metrics;

  onMount(async () => {
    const res = await fetch(`/api/dogs/metrics?dog=${encodeURIComponent(dog_val)}`);
    const data = await res.json();
    metrics = data.metrics;
  });
</script>

<!-- 渲染逻辑同方案一 -->

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