嘿，我看你遇到的问题挺典型的——靠UA判断浏览器踩坑了对吧？先给你分析下为啥原来的方法没用，再给你靠谱的解决方案。

原来的UA检测为啥失效？ #

你之前写的/Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.userAgent)有两个关键问题：

1. 现在Opera、Edge这些基于Chromium的浏览器，UA字符串里都会包含Chrome字样，第一个条件会直接误判；
2. 新版Chrome的UA里已经移除了Google Inc标识，第二个条件反而会把真正的Chrome排除在外，而Opera本来就没有这个标识，导致整个判断逻辑完全混乱，非Chrome浏览器也执行了语音识别代码，最终报错崩页面。

正确的解决方案：精准判断Chrome + API能力检测 + 安全初始化 #

咱们要做的是：先精准识别Chrome浏览器，再检测语音识别API是否可用，最后只在满足条件时才初始化功能，从根源避免报错。

步骤1：修正SpeechRecognition.js，安全初始化识别实例

把原来直接初始化的代码改成条件判断式，确保只有Chrome才创建实例：

export let recognition = null;

// 精准判断是否为Chrome（排除Edge、Opera等Chromium衍生浏览器）
const isChrome = /Chrome/.test(navigator.userAgent) && 
                 !/Edg/.test(navigator.userAgent) && 
                 !/OPR|Opera/.test(navigator.userAgent);

// 检测语音识别API是否存在
const SpeechRecognitionAPI = window.SpeechRecognition || window.webkitSpeechRecognition;

if (isChrome && SpeechRecognitionAPI) {
  try {
    recognition = new SpeechRecognitionAPI();
    recognition.start();
  } catch (err) {
    console.error("语音识别初始化失败：", err);
    recognition = null; // 初始化失败时重置为null，避免后续报错
  }
}

步骤2：在Main.js中判断实例是否存在再绑定事件

这样即使在非Chrome浏览器中，recognition是null，也不会执行后续的事件绑定代码，自然不会报错：

import { recognition } from './SpeechRecognition.js';
const history = useHistory();

if (recognition) {
  recognition.onresult = (event) => {
    const command = event.results[0][0].transcript;
    
    if (command.includes("navigate to") || command.includes("go to")) {
      if (command.includes("home") || command.includes("index")) {
        history.push("/home");
      } else if (command.includes("education")) { // 帮你去掉了重复的includes("index")，应该是笔误
        history.push("/education");
      } else if (command.includes("experience")) {
        history.push("/experience");
      } else if (command.includes("contact")) {
        history.push("/contact");
      } else if (command.includes("projects")) {
        history.push("/projects");
      } else if (command.includes("hobbies")) {
        history.push("/hobbies");
      }
    } else if (command.includes("go back")) {
      history.goBack();
    }
  };

  recognition.onend = () => {
    recognition.start();
  };
}

额外小提示 #

1. 其实更推荐优先用API能力检测而非浏览器判断——毕竟用户关心的是功能能不能用，而不是浏览器叫啥。但你明确要求只在Chrome运行，所以加了精准的浏览器判断；
2. 你原来的onresult逻辑里，每个else if都重复了includes("index")，这会导致"go to index"一直匹配第一个home的条件，我帮你修正了这个笔误；
3. 加try-catch是为了防止Chrome里出现权限拒绝、API临时不可用等情况，避免因为语音识别的问题导致整个页面崩溃。

这样修改后，Opera、Edge这些浏览器里不会初始化语音识别实例，也就不会触发报错，页面自然就不会空白啦～

备注：内容来源于stack exchange，提问作者Moe_blg