SvelteKit无法获取URL查询参数问题排查

核心错误分析 #

出现Cannot read properties of undefined (reading 'get')的500错误，本质是你在/customers/tmp/+page.js的load函数中，尝试对一个未定义的对象调用get()方法。结合场景，大概率是以下两种情况：

1. Load函数参数解构错误：没有正确从SvelteKit传入的loadEvent对象中解构出url属性
2. 查询参数访问路径错误：误将路由参数params当成查询参数载体，或者直接对url对象调用get()（正确的查询参数在url.searchParams中）

正确代码示例 #

1. 修正+page.js的Load函数 #

确保从loadEvent中解构url，并通过url.searchParams.get()获取查询参数：

// /customers/tmp/+page.js
export async function load({ url }) {
  // 正确获取type查询参数
  const customerType = url.searchParams.get('type');
  
  // 后续业务逻辑（示例）
  if (!customerType) {
    return { error: '缺少客户类型参数' };
  }
  
  return { customerType };
}

如果不确定参数结构，可以先打印整个loadEvent对象排查：

export async function load(loadEvent) {
  console.log('Load Event:', loadEvent); // 查看控制台输出的对象结构
  const customerType = loadEvent.url.searchParams.get('type');
  return { customerType };
}

2. 优化跳转逻辑（可选） #

为避免手动拼接URL出错，推荐使用goto的searchParams参数自动处理查询参数：

<!-- routes/customers/+page.svelte -->
<script>
  import { goto } from '$app/navigation';

  function addNewCustomer(customerType) {
    goto('/customers/tmp', {
      searchParams: { type: customerType }
    });
  }
</script>

<button on:click={() => addNewCustomer('retail')}>添加零售客户</button>
<button on:click={() => addNewCustomer('enterprise')}>添加企业客户</button>

常见错误对比 #

• ❌ 错误写法（直接用参数而非解构）：

// 错误：此时url是整个loadEvent对象，没有get()方法
export async function load(url) {
  const type = url.get('type'); 
}

• ❌ 错误写法（混淆路由参数与查询参数）：

// 错误：params是路由参数（如/customers/[id]中的id），不是查询参数
export async function load({ params }) {
  const type = params.get('type'); 
}

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