React Hooks中IonPopover传递点击事件的TypeScript错误解决

我看到你在将类组件转为函数组件后，遇到了IonPopover传递点击事件时的TypeScript类型错误，同时想要让popover精准定位在点击的图标旁边。这个问题的核心是useState的类型推断没有正确识别点击事件的类型，下面是具体的解决方案：

1. 显式指定useState的类型 #

你的popoverEvent状态初始值是undefined，TypeScript无法自动推断出它后续会接收MouseEvent类型的值，所以需要显式声明联合类型来明确它的取值范围：

import { MouseEvent } from 'react'; // 若环境未自动引入，需手动导入

// 修改useState的声明，明确类型
const [popoverEvent, setPopoverEvent] = useState<MouseEvent<HTMLIonIconElement, MouseEvent> | undefined>(undefined);

这样TypeScript就会清楚popoverEvent可以是undefined或者指定的鼠标事件类型，调用setPopoverEvent(e)时就不会再出现类型不匹配的报错了。

2. 阻止事件冒泡（可选但关键） #

注意到你的弹出图标嵌套在带有onClick事件的IonItem内部，如果不阻止事件冒泡，点击图标时会同时触发外层IonItem的点击逻辑，可能导致popover刚显示就被意外关闭。所以建议在图标的点击处理函数里添加e.stopPropagation()：

<IonIcon 
  icon={chevronDownOutline} 
  class="popover-icon" 
  onClick={(e) => { 
    e.stopPropagation(); // 阻止事件冒泡到外层IonItem
    setShowPopover(true); 
    setPopoverEvent(e); 
  }}
></IonIcon>

3. 完整修复后的关键代码片段 #

这里是修改后的核心代码部分：

import { useState, useEffect, MouseEvent } from 'react';
import { IonItem, IonAvatar, IonIcon, IonSpinner, IonLabel, IonPopover, IonList, IonToggle } from '@ionic/react';
// 其他必要导入...

// 建议给Props添加类型定义，提升TypeScript体验
interface BluetoothDeviceItemProps {
  address: string;
  name?: string;
  state: () => 'not_connected' | 'connecting' | 'connected';
  onClick?: (address: string) => void;
  interactable?: boolean;
  class?: string;
}

const BluetoothDeviceItem = (Props: BluetoothDeviceItemProps) => { 
  const [icon, setIcon] = useState(closeOutline); 
  const [showPopover, setShowPopover] = useState(false); 
  // 显式指定popoverEvent的类型
  const [popoverEvent, setPopoverEvent] = useState<MouseEvent<HTMLIonIconElement, MouseEvent> | undefined>(undefined); 

  // 原有updateIcons、rerender、handleClick等逻辑保持不变...

  return ( 
    <IonItem class={`${Props.class || ""}${Props.interactable ? " bluetooth-item-container" : ""}`} id={Props.address} onClick={handleClick}>
      {/* 原有IonAvatar、IonLabel等元素保持不变... */}
      <IonAvatar slot="end" class="connecting-icons-container">
        <IonIcon icon={icon} class="connecting-icons"></IonIcon>
        <IonSpinner name="dots" class="connecting-spinner"></IonSpinner>
        {Props.interactable ? (
          <IonIcon 
            icon={chevronDownOutline} 
            class="popover-icon" 
            onClick={(e) => { 
              e.stopPropagation();
              setShowPopover(true); 
              setPopoverEvent(e); 
            }}
          ></IonIcon>
        ) : <></>}
      </IonAvatar>
      <IonLabel>
        <div className="device-name">{Props.name || "Unknown"}</div>
        <div className="device-address">{Props.address}</div>
      </IonLabel>
      <IonPopover 
        isOpen={showPopover} 
        cssClass='popover-style-class' 
        event={popoverEvent} 
        onDidDismiss={_ => { 
          setShowPopover(false); 
          setPopoverEvent(null); 
        }} 
      >
        <IonList>
          <IonItem lines="none" class="popover-item">
            <IonLabel class="popover-autoconnect-label">Autoconnect</IonLabel>
            <IonToggle slot="end" color="success" onIonChange={toggleChanged}></IonToggle>
          </IonItem>
        </IonList>
      </IonPopover>
    </IonItem>
  ); 
} 
export default BluetoothDeviceItem;

额外建议：完善Props类型定义 #

上面的代码中给Props添加了接口类型，这能避免使用any类型带来的不确定性，同时获得更精准的代码提示和类型检查，让你的TypeScript代码更健壮。

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