类型'HTMLCollectionOf<Element>'不存在属性'innerText'问题解决

问题原因 #

document.getElementsByClassName() 返回的是HTMLCollection（元素集合），不是单个DOM元素。集合本身没有innerText属性，直接给它赋值自然会报错。另外原代码里的if (currentSignature)判断无效——HTMLCollection即使没有匹配到元素，也不会是null或undefined，这个条件永远为true。

解决方案 #

根据你的需求，有几种处理方式：

1. 仅操作第一个匹配的元素

如果页面中只会有一个.gmail_signature元素，直接取集合的第一个元素并判断是否存在：

import { RichTextEditorComponent } from "@syncfusion/ej2-react-richtexteditor";

export const handleSignatureSelect = (
  signature: string,
  editorRef: React.RefObject<RichTextEditorComponent>
) => {
  const currentSignature = document.getElementsByClassName("gmail_signature");
  // 判断集合是否有元素，再取第一个元素操作
  if (currentSignature.length > 0) {
    // 类型断言为HTMLElement，因为Element类型没有innerText属性
    (currentSignature[0] as HTMLElement).innerText = signature;
    return;
  }

  editorRef.current?.executeCommand(
    "insertHTML",
    `<br><br clear="all"><div><br></div><br><div dir="ltr" class="gmail_signature" 
     data-smartmail="gmail_signature">${signature}</div>`
  );
};

2. 操作所有匹配的元素

如果页面中有多个.gmail_signature元素，需要遍历集合逐个修改：

import { RichTextEditorComponent } from "@syncfusion/ej2-react-richtexteditor";

export const handleSignatureSelect = (
  signature: string,
  editorRef: React.RefObject<RichTextEditorComponent>
) => {
  const currentSignature = document.getElementsByClassName("gmail_signature");
  if (currentSignature.length > 0) {
    // 把HTMLCollection转成数组后遍历
    Array.from(currentSignature).forEach(element => {
      (element as HTMLElement).innerText = signature;
    });
    return;
  }

  editorRef.current?.executeCommand(
    "insertHTML",
    `<br><br clear="all"><div><br></div><br><div dir="ltr" class="gmail_signature" 
     data-smartmail="gmail_signature">${signature}</div>`
  );
};

3. 用querySelector简化单个元素获取

如果确定只会有一个目标元素，用document.querySelector()更简洁，它直接返回单个元素（或null）：

import { RichTextEditorComponent } from "@syncfusion/ej2-react-richtexteditor";

export const handleSignatureSelect = (
  signature: string,
  editorRef: React.RefObject<RichTextEditorComponent>
) => {
  // querySelector返回单个元素或null
  const currentSignature = document.querySelector(".gmail_signature");
  if (currentSignature) {
    (currentSignature as HTMLElement).innerText = signature;
    return;
  }

  editorRef.current?.executeCommand(
    "insertHTML",
    `<br><br clear="all"><div><br></div><br><div dir="ltr" class="gmail_signature" 
     data-smartmail="gmail_signature">${signature}</div>`
  );
};

补充说明 #

TypeScript中，Element类型本身没有innerText属性，需要断言为HTMLElement才能使用这个属性——因为不是所有Element（比如SVG元素）都支持innerText。

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