SvelteKit中实现模态框与导航控制Store遇类型错误

问题描述 #

我正在创建一个用于控制模态框与导航的SvelteKit Store，使用的代码如下：

import { writable } from 'svelte/store';
import { onMount } from 'svelte'

export const store = () => {
    const { subscribe, update } = writable({
        showMenu: false,
        showSubMenu: false,
    });

    onMount(() => {
        // Handle click outside of menu
        const clickOutside = (event: MouseEvent, node: HTMLElement) => {
            if (!node.contains(event.target as Node)) {
                update((storeObject) => {
                    storeObject.showMenu = false;
                    return storeObject;
                })
            }
        }

        window.addEventListener("click", clickOutside);

        return () => {
            window.removeEventListener("click", clickOutside);
        }
    });
}

运行时抛出错误No operator overload matches this call，推测是clickOutside函数中的node参数导致该问题，请问该如何解决？

问题根源 #

错误的核心原因是**window.addEventListener的click事件回调仅接受一个MouseEvent参数**，但你定义的clickOutside函数要求传入两个参数（event和node），TypeScript无法匹配到对应的重载，因此抛出类型错误。另外逻辑上也存在漏洞：onMount中并没有传入node的入口，这个参数从始至终都是未定义状态。

修复方案 #

1. 调整事件回调参数：让clickOutside仅接收event一个参数
2. 分离DOM操作与store逻辑：Svelte的store应专注于状态管理，DOM相关操作放在组件中更合理
3. 获取目标节点并修正判断逻辑：通过组件内的bind:this获取菜单DOM节点，再判断点击是否发生在节点外部

修正后的代码示例 #

1. Store文件（专注状态管理） #

import { writable } from 'svelte/store';

export const menuStore = () => {
    const { subscribe, update } = writable({
        showMenu: false,
        showSubMenu: false,
    });

    return {
        subscribe,
        toggleMenu: () => update(s => ({...s, showMenu: !s.showMenu})),
        closeMenu: () => update(s => ({...s, showMenu: false}))
    };
}

2. 组件文件（处理DOM交互） #

<script lang="ts">
    import { onMount } from 'svelte';
    import { menuStore } from '$lib/stores/menu';

    const { closeMenu } = menuStore();
    let menuNode: HTMLElement;

    onMount(() => {
        const clickOutside = (event: MouseEvent) => {
            if (menuNode && !menuNode.contains(event.target as Node)) {
                closeMenu();
            }
        };

        window.addEventListener('click', clickOutside);
        return () => window.removeEventListener('click', clickOutside);
    });
</script>

<!-- 菜单元素，通过bind:this获取节点引用 -->
<div bind:this={menuNode} class="menu" hidden={!$menuStore.showMenu}>
    <!-- 菜单内容 -->
</div>

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