Javascript 未捕获类型错误：无法读取属性'；包含'；在HTMLDocument.handler处为null

我的头组件中有以下代码。我认为这可能会引发这个错误，因为我甚至在屏幕上呈现之前就尝试访问它。我不确定这为什么不起作用，我尝试在子组件中使用

forwardRef

，但在

SearchDropDown

组件中的ref处出现以下错误。我希望有人能告诉我这里出了什么问题

Type '((instance: unknown) => void) | MutableRefObject<unknown>' is not assignable to type 'LegacyRef<HTMLDivElement>'.
  Type 'MutableRefObject<unknown>' is not assignable to type 'LegacyRef<HTMLDivElement>'.
    Type 'MutableRefObject<unknown>' is not assignable to type 'RefObject<HTMLDivElement>'.
      Types of property 'current' are incompatible.
        Type '{}' is missing the following properties from type 'HTMLDivElement': align, addEventListener, removeEventListener, accessKey, and 235 more.
The expected type comes from property 'ref' which is declared here on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'

Type'（（实例：未知）=>void）| MutableRefObject'不可分配给类型“LegacyRef”。
类型“MutableReObject”不可分配给类型“LegacyRef”。
类型“MutableReObject”不可分配给类型“ReObject”。
属性“current”的类型不兼容。
类型“{}”缺少类型“HtmlLevel”中的以下属性：align、addEventListener、removeEventListener、accessKey等。
预期的类型来自属性“ref”，该属性在类型“DetailedHTMLProps”上声明

页面组件

  const domNodeRef = useRef(null);
  const [search, setSearch] = useState("");

  useEffect(() => {
    const handler = (e) => {
      if (domNodeRef !== undefined || domNodeRef !== null) {
        if (!domNodeRef.current.contains(e.target)) {
          setSearch("");
        }
      }
    };
    document.addEventListener("mousedown", handler);

    return () => {
      document.addEventListener("mousedown", handler);
    };
  });

  return (
   <div className="header">
     <div className="header-content">
       <div className="searchh">
         <input 
           placeholder="Type to search"
           onChange={handleSearchChange}
         />
         {!!search && (
           <SearchDropDown 
             search={search}
             ref={domNodeRef}
           />
         )}
       </div>
     </div>
   </div>
  )

const SearchDropDown = (props) => {
  ....
  return (
    <div className="search-drop-down" ref={props.ref}>
     .....
    </div>
  )
}

const-domNodeRef=useRef（null）；
const[search，setSearch]=useState（“”）；
useffect（（）=>{
常量处理程序=（e）=>{
if（domNodeRef！==undefined | | domNodeRef！==null）{
如果（！domNodeRef.current.contains（e.target））{
集合搜索（“”）；
}
}
};
文件。添加的事件列表器（“鼠标向下”，处理程序）；
return（）=>{
文件。添加的事件列表器（“鼠标向下”，处理程序）；
};
});
返回(
{！！搜索&&(
)}
)

搜索下拉组件

  const domNodeRef = useRef(null);
  const [search, setSearch] = useState("");

  useEffect(() => {
    const handler = (e) => {
      if (domNodeRef !== undefined || domNodeRef !== null) {
        if (!domNodeRef.current.contains(e.target)) {
          setSearch("");
        }
      }
    };
    document.addEventListener("mousedown", handler);

    return () => {
      document.addEventListener("mousedown", handler);
    };
  });

  return (
   <div className="header">
     <div className="header-content">
       <div className="searchh">
         <input 
           placeholder="Type to search"
           onChange={handleSearchChange}
         />
         {!!search && (
           <SearchDropDown 
             search={search}
             ref={domNodeRef}
           />
         )}
       </div>
     </div>
   </div>
  )

const SearchDropDown = (props) => {
  ....
  return (
    <div className="search-drop-down" ref={props.ref}>
     .....
    </div>
  )
}

const SearchDropDown=（道具）=>{
....
返回(
.....
)
}

useRef

将返回一致的对象。它永远不会是

null

或

未定义的

将要更改的是ref上的
.current
属性-这是您应该检查的，而不是ref对象本身

if (domNodeRef !== undefined || domNodeRef !== null) {

应改为

if (domNodeRef.current) {

也

应该是

return () => {
  document.removeEventListener("mousedown", handler);
};

你可以考虑另一种方法——而不是一个REF和<代码>。包含，只检查目标是否有<代码> >最接近的< /C>元素：搜索栏：
useEffect(() => {
    const handler = (e) => {
        if (!e.target.closest('.search-drop-down')) {
            setSearch("");
        }
    }
    document.addEventListener("mousedown", handler);
    return () => {
        document.removeEventListener("mousedown", handler);
    };
}, []);

useRef
将返回一致的对象。它永远不会是
null
或
未定义的

将要更改的是ref上的
.current
属性-这是您应该检查的，而不是ref对象本身

if (domNodeRef !== undefined || domNodeRef !== null) {

应改为

if (domNodeRef.current) {

也

应该是

return () => {
  document.removeEventListener("mousedown", handler);
};

你可以考虑另一种方法——而不是一个REF和<代码>。包含，只检查目标是否有<代码> >最接近的< /C>元素：搜索栏：
useEffect(() => {
    const handler = (e) => {
        if (!e.target.closest('.search-drop-down')) {
            setSearch("");
        }
    }
    document.addEventListener("mousedown", handler);
    return () => {
        document.removeEventListener("mousedown", handler);
    };
}, []);