SvelteKit报错'filtered' is not a store with a 'subscribe' method如何解决

问题核心原因 #

你触发的是filtered is not a function运行时错误，问题点如下：

• 变量命名冲突：你先声明let filtered = []将其定义为数组，后续又尝试将其作为过滤函数调用，类型不匹配
• 错误使用store订阅符：filtered是普通响应式变量不是Svelte store，模板中使用时不该加$前缀
• store取值错误：你导入的pokemon是Svelte store，直接读取pokemon.searchTerm拿不到实际值，需要加$前缀订阅store的值
• 缺少过滤函数实现：代码中没有定义按关键词过滤宝可梦列表的逻辑

修复方案 #

1. 修正script块逻辑 #

调整变量命名，补充过滤函数，修正store取值：

<script>
    import Nav from '../components/nav.svelte'
    import {pokemon} from '../stores/pokestore'
    import PokemanCard from "../components/pokemanCard.svelte"

    let searchTerm = "";
    // 重命名数组变量，避免和过滤函数冲突
    let filteredPokemon = [];

    // 新增过滤函数
    const filterPokemon = (pokemonList, keyword) => {
        return pokemonList.filter(item => 
            item.name.toLowerCase().includes(keyword.trim().toLowerCase())
        )
    }

    $: {
        // 同步store中的搜索词
        if (searchTerm !== $pokemon.searchTerm) {
            searchTerm = $pokemon.searchTerm;
        }
        // 响应式过滤列表
        filteredPokemon = filterPokemon($pokemon.pokemons, searchTerm);
    }
</script>

2. 修正模板遍历逻辑 #

去掉错误的$前缀，使用重命名后的数组变量：

<div class="py-4 grid gap-4 md:grid-cols-2 grid-cols-1">
    {#each filteredPokemon as pokeman}
    <PokemanCard pokeman={pokeman} />
    {/each}
</div>

可选简化 #

如果你不需要额外的判断逻辑，可直接简化响应式写法，代码更易维护：

// 搜索词变化自动同步到store
$: $pokemon.searchTerm = searchTerm;
// 搜索词或宝可梦列表变化自动重新过滤
$: filteredPokemon = filterPokemon($pokemon.pokemons, searchTerm);

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