Javascript Flowtype无法获取.clientHeight，因为节点[prop missing]中缺少属性clientHeight

我试图在html元素上设置nextSibling或previousSibling，但它返回了这个我不理解的结果

   let selectedElement: ?HTMLElement;
      const setOptionRef = ref => {
        selectedElement = ref;
      };
    
   const handleScrolling = (direction: number) => {
    const container = containerRef.current;

    // Based on keyboard navigation we get the next or previuos option
    // When we reach the start or end of the list, move to the start or end of the list based on the direction
    const nextOption =
      direction > 0
        ? selectedElement?.nextSibling
        : selectedElement?.previousSibling;

    // Handles which option to display once we've hit the end of the list range
    const endRangeOption =
      direction > 0
        ? container?.firstChild?.firstChild
        : container?.firstChild?.lastChild;

    const selectedOption: HTMLElement = nextOption || endRangeOption;

    // If one of these nodes is missing exit early
    if (!container || !selectedOption) return;

    const containerHeight: number = container.getClientRects()[0]?.height;
    const overScroll: number = selectedOption?.offsetHeight / 3;

    const scrollPos: number =
      selectedOption?.offsetTop +
      selectedOption?.clientHeight -
      containerHeight +
      overScroll;

    container.scrollTop = scrollPos;
   };

我不断收到这些流类型错误：

错误┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ src/Typeahead.js:175:40

无法获取selectedOption？.OffsetSight，因为属性OffsetSight 节点[1]中缺少。[道具丢失]

 packages/gestalt/src/Typeahead.js
 172│     if (!container || !selectedOption) return;
 173│
 174│     const containerHeight = container.getClientRects()[0].height;
 175│     const overScroll = selectedOption?.offsetHeight / 3;
 176│
 177│     const scrollPos =
 178│       selectedOption.offsetTop +

 /private/tmp/flow/flowlib_349b825f/dom.js  [1] 608│   nextSibling: ?Node;

 packages/gestalt/src/Typeahead.js
 172│     if (!container || !selectedOption) return;
 173│
 174│     const containerHeight = container.getClientRects()[0].height;
 175│     const overScroll = selectedOption?.offsetHeight / 3;
 176│
 177│     const scrollPos =
 178│       selectedOption.offsetTop +

 /private/tmp/flow/flowlib_349b825f/dom.js  [1] 615│   previousSibling: ?Node;

 packages/gestalt/src/Typeahead.js
 175│     const overScroll = selectedOption?.offsetHeight / 3;
 176│
 177│     const scrollPos =
 178│       selectedOption.offsetTop +
 179│       selectedOption.clientHeight -
 180│       containerHeight +
 181│       overScroll;

 /private/tmp/flow/flowlib_349b825f/dom.js  [1] 608│   nextSibling: ?Node;

 packages/gestalt/src/Typeahead.js
 175│     const overScroll = selectedOption?.offsetHeight / 3;
 176│
 177│     const scrollPos =
 178│       selectedOption.offsetTop +
 179│       selectedOption.clientHeight -
 180│       containerHeight +
 181│       overScroll;

 /private/tmp/flow/flowlib_349b825f/dom.js  [1] 615│   previousSibling: ?Node;

 packages/gestalt/src/Typeahead.js
 176│
 177│     const scrollPos =
 178│       selectedOption.offsetTop +
 179│       selectedOption.clientHeight -
 180│       containerHeight +
 181│       overScroll;
 182│

 /private/tmp/flow/flowlib_349b825f/dom.js  [1] 608│   nextSibling: ?Node;

 packages/gestalt/src/Typeahead.js
 176│
 177│     const scrollPos =
 178│       selectedOption.offsetTop +
 179│       selectedOption.clientHeight -
 180│       containerHeight +
 181│       overScroll;
 182│

 /private/tmp/flow/flowlib_349b825f/dom.js  [1] 615│   previousSibling: ?Node;

错误┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ src/Typeahead.js:175:40

无法获取selectedOption？.OffsetSight，因为属性OffsetSight 节点[1]中缺少。[道具丢失]

 packages/gestalt/src/Typeahead.js
 172│     if (!container || !selectedOption) return;
 173│
 174│     const containerHeight = container.getClientRects()[0].height;
 175│     const overScroll = selectedOption?.offsetHeight / 3;
 176│
 177│     const scrollPos =
 178│       selectedOption.offsetTop +

 /private/tmp/flow/flowlib_349b825f/dom.js  [1] 608│   nextSibling: ?Node;

 packages/gestalt/src/Typeahead.js
 172│     if (!container || !selectedOption) return;
 173│
 174│     const containerHeight = container.getClientRects()[0].height;
 175│     const overScroll = selectedOption?.offsetHeight / 3;
 176│
 177│     const scrollPos =
 178│       selectedOption.offsetTop +

 /private/tmp/flow/flowlib_349b825f/dom.js  [1] 615│   previousSibling: ?Node;

 packages/gestalt/src/Typeahead.js
 175│     const overScroll = selectedOption?.offsetHeight / 3;
 176│
 177│     const scrollPos =
 178│       selectedOption.offsetTop +
 179│       selectedOption.clientHeight -
 180│       containerHeight +
 181│       overScroll;

 /private/tmp/flow/flowlib_349b825f/dom.js  [1] 608│   nextSibling: ?Node;

 packages/gestalt/src/Typeahead.js
 175│     const overScroll = selectedOption?.offsetHeight / 3;
 176│
 177│     const scrollPos =
 178│       selectedOption.offsetTop +
 179│       selectedOption.clientHeight -
 180│       containerHeight +
 181│       overScroll;

 /private/tmp/flow/flowlib_349b825f/dom.js  [1] 615│   previousSibling: ?Node;

 packages/gestalt/src/Typeahead.js
 176│
 177│     const scrollPos =
 178│       selectedOption.offsetTop +
 179│       selectedOption.clientHeight -
 180│       containerHeight +
 181│       overScroll;
 182│

 /private/tmp/flow/flowlib_349b825f/dom.js  [1] 608│   nextSibling: ?Node;

 packages/gestalt/src/Typeahead.js
 176│
 177│     const scrollPos =
 178│       selectedOption.offsetTop +
 179│       selectedOption.clientHeight -
 180│       containerHeight +
 181│       overScroll;
 182│

 /private/tmp/flow/flowlib_349b825f/dom.js  [1] 615│   previousSibling: ?Node;

错误┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ src/Typeahead.js:178:22

无法获取selectedOption.offsetTop，因为属性offsetTop为 节点[1]中缺少。[道具丢失]

 packages/gestalt/src/Typeahead.js
 172│     if (!container || !selectedOption) return;
 173│
 174│     const containerHeight = container.getClientRects()[0].height;
 175│     const overScroll = selectedOption?.offsetHeight / 3;
 176│
 177│     const scrollPos =
 178│       selectedOption.offsetTop +

 /private/tmp/flow/flowlib_349b825f/dom.js  [1] 608│   nextSibling: ?Node;

 packages/gestalt/src/Typeahead.js
 172│     if (!container || !selectedOption) return;
 173│
 174│     const containerHeight = container.getClientRects()[0].height;
 175│     const overScroll = selectedOption?.offsetHeight / 3;
 176│
 177│     const scrollPos =
 178│       selectedOption.offsetTop +

 /private/tmp/flow/flowlib_349b825f/dom.js  [1] 615│   previousSibling: ?Node;

 packages/gestalt/src/Typeahead.js
 175│     const overScroll = selectedOption?.offsetHeight / 3;
 176│
 177│     const scrollPos =
 178│       selectedOption.offsetTop +
 179│       selectedOption.clientHeight -
 180│       containerHeight +
 181│       overScroll;

 /private/tmp/flow/flowlib_349b825f/dom.js  [1] 608│   nextSibling: ?Node;

 packages/gestalt/src/Typeahead.js
 175│     const overScroll = selectedOption?.offsetHeight / 3;
 176│
 177│     const scrollPos =
 178│       selectedOption.offsetTop +
 179│       selectedOption.clientHeight -
 180│       containerHeight +
 181│       overScroll;

 /private/tmp/flow/flowlib_349b825f/dom.js  [1] 615│   previousSibling: ?Node;

 packages/gestalt/src/Typeahead.js
 176│
 177│     const scrollPos =
 178│       selectedOption.offsetTop +
 179│       selectedOption.clientHeight -
 180│       containerHeight +
 181│       overScroll;
 182│

 /private/tmp/flow/flowlib_349b825f/dom.js  [1] 608│   nextSibling: ?Node;

 packages/gestalt/src/Typeahead.js
 176│
 177│     const scrollPos =
 178│       selectedOption.offsetTop +
 179│       selectedOption.clientHeight -
 180│       containerHeight +
 181│       overScroll;
 182│

 /private/tmp/flow/flowlib_349b825f/dom.js  [1] 615│   previousSibling: ?Node;

错误┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ src/Typeahead.js:178:22

无法获取selectedOption.offsetTop，因为属性offsetTop为 节点[1]中缺少。[道具丢失]

 packages/gestalt/src/Typeahead.js
 172│     if (!container || !selectedOption) return;
 173│
 174│     const containerHeight = container.getClientRects()[0].height;
 175│     const overScroll = selectedOption?.offsetHeight / 3;
 176│
 177│     const scrollPos =
 178│       selectedOption.offsetTop +

 /private/tmp/flow/flowlib_349b825f/dom.js  [1] 608│   nextSibling: ?Node;

 packages/gestalt/src/Typeahead.js
 172│     if (!container || !selectedOption) return;
 173│
 174│     const containerHeight = container.getClientRects()[0].height;
 175│     const overScroll = selectedOption?.offsetHeight / 3;
 176│
 177│     const scrollPos =
 178│       selectedOption.offsetTop +

 /private/tmp/flow/flowlib_349b825f/dom.js  [1] 615│   previousSibling: ?Node;

 packages/gestalt/src/Typeahead.js
 175│     const overScroll = selectedOption?.offsetHeight / 3;
 176│
 177│     const scrollPos =
 178│       selectedOption.offsetTop +
 179│       selectedOption.clientHeight -
 180│       containerHeight +
 181│       overScroll;

 /private/tmp/flow/flowlib_349b825f/dom.js  [1] 608│   nextSibling: ?Node;

 packages/gestalt/src/Typeahead.js
 175│     const overScroll = selectedOption?.offsetHeight / 3;
 176│
 177│     const scrollPos =
 178│       selectedOption.offsetTop +
 179│       selectedOption.clientHeight -
 180│       containerHeight +
 181│       overScroll;

 /private/tmp/flow/flowlib_349b825f/dom.js  [1] 615│   previousSibling: ?Node;

 packages/gestalt/src/Typeahead.js
 176│
 177│     const scrollPos =
 178│       selectedOption.offsetTop +
 179│       selectedOption.clientHeight -
 180│       containerHeight +
 181│       overScroll;
 182│

 /private/tmp/flow/flowlib_349b825f/dom.js  [1] 608│   nextSibling: ?Node;

 packages/gestalt/src/Typeahead.js
 176│
 177│     const scrollPos =
 178│       selectedOption.offsetTop +
 179│       selectedOption.clientHeight -
 180│       containerHeight +
 181│       overScroll;
 182│

 /private/tmp/flow/flowlib_349b825f/dom.js  [1] 615│   previousSibling: ?Node;

错误┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ src/Typeahead.js:179:22

无法获取selectedOption.clientHeight，因为属性clientHeight 节点[1]中缺少。[道具丢失]

 packages/gestalt/src/Typeahead.js
 172│     if (!container || !selectedOption) return;
 173│
 174│     const containerHeight = container.getClientRects()[0].height;
 175│     const overScroll = selectedOption?.offsetHeight / 3;
 176│
 177│     const scrollPos =
 178│       selectedOption.offsetTop +

 /private/tmp/flow/flowlib_349b825f/dom.js  [1] 608│   nextSibling: ?Node;

 packages/gestalt/src/Typeahead.js
 172│     if (!container || !selectedOption) return;
 173│
 174│     const containerHeight = container.getClientRects()[0].height;
 175│     const overScroll = selectedOption?.offsetHeight / 3;
 176│
 177│     const scrollPos =
 178│       selectedOption.offsetTop +

 /private/tmp/flow/flowlib_349b825f/dom.js  [1] 615│   previousSibling: ?Node;

 packages/gestalt/src/Typeahead.js
 175│     const overScroll = selectedOption?.offsetHeight / 3;
 176│
 177│     const scrollPos =
 178│       selectedOption.offsetTop +
 179│       selectedOption.clientHeight -
 180│       containerHeight +
 181│       overScroll;

 /private/tmp/flow/flowlib_349b825f/dom.js  [1] 608│   nextSibling: ?Node;

 packages/gestalt/src/Typeahead.js
 175│     const overScroll = selectedOption?.offsetHeight / 3;
 176│
 177│     const scrollPos =
 178│       selectedOption.offsetTop +
 179│       selectedOption.clientHeight -
 180│       containerHeight +
 181│       overScroll;

 /private/tmp/flow/flowlib_349b825f/dom.js  [1] 615│   previousSibling: ?Node;

 packages/gestalt/src/Typeahead.js
 176│
 177│     const scrollPos =
 178│       selectedOption.offsetTop +
 179│       selectedOption.clientHeight -
 180│       containerHeight +
 181│       overScroll;
 182│

 /private/tmp/flow/flowlib_349b825f/dom.js  [1] 608│   nextSibling: ?Node;

 packages/gestalt/src/Typeahead.js
 176│
 177│     const scrollPos =
 178│       selectedOption.offsetTop +
 179│       selectedOption.clientHeight -
 180│       containerHeight +
 181│       overScroll;
 182│

 /private/tmp/flow/flowlib_349b825f/dom.js  [1] 615│   previousSibling: ?Node;

错误┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ src/Typeahead.js:179:22

无法获取selectedOption.clientHeight，因为属性clientHeight 节点[1]中缺少。[道具丢失]

 packages/gestalt/src/Typeahead.js
 172│     if (!container || !selectedOption) return;
 173│
 174│     const containerHeight = container.getClientRects()[0].height;
 175│     const overScroll = selectedOption?.offsetHeight / 3;
 176│
 177│     const scrollPos =
 178│       selectedOption.offsetTop +

 /private/tmp/flow/flowlib_349b825f/dom.js  [1] 608│   nextSibling: ?Node;

 packages/gestalt/src/Typeahead.js
 172│     if (!container || !selectedOption) return;
 173│
 174│     const containerHeight = container.getClientRects()[0].height;
 175│     const overScroll = selectedOption?.offsetHeight / 3;
 176│
 177│     const scrollPos =
 178│       selectedOption.offsetTop +

 /private/tmp/flow/flowlib_349b825f/dom.js  [1] 615│   previousSibling: ?Node;

 packages/gestalt/src/Typeahead.js
 175│     const overScroll = selectedOption?.offsetHeight / 3;
 176│
 177│     const scrollPos =
 178│       selectedOption.offsetTop +
 179│       selectedOption.clientHeight -
 180│       containerHeight +
 181│       overScroll;

 /private/tmp/flow/flowlib_349b825f/dom.js  [1] 608│   nextSibling: ?Node;

 packages/gestalt/src/Typeahead.js
 175│     const overScroll = selectedOption?.offsetHeight / 3;
 176│
 177│     const scrollPos =
 178│       selectedOption.offsetTop +
 179│       selectedOption.clientHeight -
 180│       containerHeight +
 181│       overScroll;

 /private/tmp/flow/flowlib_349b825f/dom.js  [1] 615│   previousSibling: ?Node;

 packages/gestalt/src/Typeahead.js
 176│
 177│     const scrollPos =
 178│       selectedOption.offsetTop +
 179│       selectedOption.clientHeight -
 180│       containerHeight +
 181│       overScroll;
 182│

 /private/tmp/flow/flowlib_349b825f/dom.js  [1] 608│   nextSibling: ?Node;

 packages/gestalt/src/Typeahead.js
 176│
 177│     const scrollPos =
 178│       selectedOption.offsetTop +
 179│       selectedOption.clientHeight -
 180│       containerHeight +
 181│       overScroll;
 182│

 /private/tmp/flow/flowlib_349b825f/dom.js  [1] 615│   previousSibling: ?Node;

---

由于flow无法验证对象要执行的正确类型检查，因此，

offsetHeight

会出现错误。在上面给出的代码片段中，您立即将

selectedOption

指定为

HTMLElement

，这听起来不合理，因为如果不使用任何逻辑条件，您如何确保

selectedOption

将是

HTMLElement

而不是

null

或

未定义的

const selectedOption: HTMLElement = nextOption || endRangeOption;

相反，您应该删除此处的类型分配，因为此时您仍然不确定它的值是多少，然后在下一条语句中更改
if
条件以验证对象类型：

if (!container || !(selectedOption instanceof HTMLElement)) return;

现在，从这一行开始编写的任何代码都将受到约束，即
selectedOption
属于
HTMLElement
类型，因此您的所有流错误都应该得到修复。
您能确认
selectedElement
具有您期望的值吗，代码按预期工作似乎您真的想要选择带有问号的选项：？HTMLElement
，并且您想要
.nextElementSibling
和
.firstElementChild
等等。现在您得到的是
节点
，而不是
元素
，因为可能存在文本节点或注释。我得到的是HtmleElement和元素之间的兼容性问题，它们没有被视为同一类型。