SvelteKit+Supabase数据获取TypeScript报错：null无法赋值给ArrayLike

问题核心 #

你遇到的两个TypeScript错误本质是两个问题：

1. Supabase的select('*')返回的data可能为null，而Svelte的{#each}不接受null类型的遍历源
2. TypeScript无法自动推断data.playlist的具体类型，导致循环中pl为unknown

分步解决 #

1. 处理null类型的遍历源 #

直接在Svelte文件中用空值合并运算符把null转为空数组，让{#each}能正常接收：

<ul>
    {#each data.playlist ?? [] as pl}
        <li>{pl.spotify_uri}</li>
    {/each}
</ul>

或者在+page.ts的load函数里提前处理null，确保返回的playlist始终是数组：

// routes/playlists/+page.ts
export const load: PageLoad = async ({ parent }) => {
    const { supabase, session } = await parent();
    if (!session) throw redirect(303, '/');

    const { data: playlist } = await supabase.from('playlist').select('*');
    // 确保返回数组而非null
    return {
        user: session.user,
        playlist: playlist ?? []
    };
};

2. 让TypeScript正确推断playlist的类型 #

利用Supabase自动生成的类型定义，明确注解playlist的类型：

// routes/playlists/+page.ts
import type { Database } from '$lib/types/supabase'; // 路径根据你的生成文件调整
import type { PageLoad } from './$types';
import { redirect } from '@sveltejs/kit';

// 从Supabase生成的类型中提取playlist表的行类型
type Playlist = Database['public']['Tables']['playlist']['Row'];

export const load: PageLoad = async ({ parent }) => {
    const { supabase, session } = await parent();
    if (!session) throw redirect(303, '/');

    const { data: playlist } = await supabase.from('playlist').select('*');
    return {
        user: session.user,
        playlist: playlist ?? [] as Playlist[]
    };
};

3. 验证app.d.ts的配置 #

确保app.d.ts中正确引入Supabase类型，让supabase实例的类型被正确推断：

// src/app.d.ts
import type { SupabaseClient, Session } from '@supabase/supabase-js';
import type { Database } from '$lib/types/supabase';

declare global {
    namespace App {
        interface Locals {
            supabase: SupabaseClient<Database>;
            session: Session | null;
        }
        // 保留其他已有接口
    }
}

export {};

错误原因说明 #

• Supabase的select方法返回的data类型是T[] | null（查询无结果或出错时为null），而Svelte的{#each}仅接受ArrayLike类型，因此null会触发类型错误
• 虽然Supabase生成了类型，但如果load函数的返回类型未明确关联这些类型，TypeScript无法自动推断data.playlist的具体结构，导致pl被视为unknown

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