React中出现Cannot read properties of null (reading 'appendChild')报错求助

报错Cannot read properties of null (reading 'appendChild')的核心原因有两点：

• OpenSeadragon初始化时，配置项的id参数要求传入容器元素的ID字符串，但你传入的是viewerRef.current（DOM对象），这会导致OpenSeadragon无法正确绑定容器，进而内部逻辑出错。
• 额外手动调用viewerRef.current.appendChild(viewer.element)是多余操作，因为OpenSeadragon初始化时会自动将渲染元素挂载到指定容器中，手动操作反而可能引发DOM引用问题。

修改OpenSeadragonViewer组件的初始化逻辑，用element参数直接传入DOM对象，同时移除多余的appendChild操作：

import OpenSeadragon from "openseadragon";
import { useRef, useEffect } from "react";

const OpenSeadragonViewer = ({ imagePath }) => {
  const viewerRef = useRef(null);

  useEffect(() => {
    if (!viewerRef.current) return; // 确保DOM元素已挂载

    const viewer = OpenSeadragon({
      element: viewerRef.current, // 替换id为element，传入DOM对象
      prefixUrl: "openseadragon/images/",
      tileSources: {
        type: "image",
        url: imagePath,
      },
    });

    return () => {
      viewer.destroy();
    };
  }, [imagePath]);

  return <div ref={viewerRef} style={{ height: "500px" }}></div>;
};

export default OpenSeadragonViewer;

在Details组件的useEffect依赖数组中添加id，确保路由参数变化时重新请求数据：

useEffect(() => {
  fetch(`https://jsonplaceholder.typicode.com/photos/${id}`)
    .then((response) => response.json())
    .then((result) => setImagePath(result.url));
}, [id]); // 添加id依赖，适配路由参数变更场景

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