Svelte中使用WebSpeech API遇window未定义报错的解决办法

开发者阿泽

2026-8-6

解决Vite+Svelte中使用Google WebSpeech API时的window未定义错误

问题原因

直接在组件初始化阶段访问window对象，但Svelte配合Vite编译时，可能在服务端预渲染或非浏览器环境执行代码，此时window尚未存在，导致编译报错。

解决方案

1. 使用Svelte的`onMount`生命周期钩子

onMount仅在组件挂载到浏览器DOM后执行，此时window对象已存在，是最安全的执行时机：

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

  let recognition;

  onMount(() => {
    // 兼容Chrome等webkit内核浏览器
    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
    
    if (SpeechRecognition) {
      recognition = new SpeechRecognition();
      // 可在此配置识别参数，例如：
      // recognition.continuous = true;
      // recognition.interimResults = true;
    } else {
      console.error('当前浏览器不支持Web Speech API');
    }
  });

  // 示例：开始识别的方法
  function startListening() {
    recognition?.start();
  }
</script>

<button on:click={startListening}>开始语音识别</button>

2. 提前判断window是否存在

如果不需要严格在组件挂载后执行，可通过typeof window !== 'undefined'判断环境，避免非浏览器环境报错：

let recognition;

if (typeof window !== 'undefined') {
  const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
  recognition = SpeechRecognition ? new SpeechRecognition() : null;
}

3. 针对SSR场景的额外处理

如果项目启用了服务端渲染（SSR），可通过import.meta.env.SSR标记代码仅在客户端执行：

if (!import.meta.env.SSR) {
  const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
  const recognition = SpeechRecognition ? new SpeechRecognition() : null;
}