“containerRef.current”可能为 “null”。ts(18047) const containerRef: React.MutableRefObject<null>

对不起，这是一个类型错误。在使用 `useRef 创建引用时，需要指定引用初始值的类型。对于 `containerRef` 引用，您可以将其类型声明为 `React.MutableRefObject<HTMLDivElement | null>`，表示它引用了一个 `HTMLDivElement` 元素或者是 `null`。以下是修改后的示例代码：

import React, { useState, useEffect, useRef } from 'react';

const YourComponent = () => {
  const [data, setData] = useState([]);
  const [page, setPage] = useState(1);
  const containerRef = useRef<HTMLDivElement | null>(null);

  const fetchNextPageData = async () => {
    const response = await fetch(`your-api-url?page=${page}`);
    const responseData = await response.json();
    return responseData;
  };

  const handleScroll = () => {
    if (containerRef.current) {
      const { scrollTop, scrollHeight, clientHeight } = containerRef.current;

      if (scrollTop + clientHeight === scrollHeight) {
        loadNextPage();
      }
    }
  };

  const loadNextPage = async () => {
    try {
      const nextPageData = await fetchNextPageData();
      setData((prevData) => [...prevData, ...nextPageData]);
      setPage((prevPage) => prevPage + 1);
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  };

  useEffect(() => {
    if (containerRef.current) {
      containerRef.current.addEventListener('scroll', handleScroll);
    }

    return () => {
      if (containerRef.current) {
        containerRef.current.removeEventListener('scroll', handleScroll);
      }
    };
  }, []);

  return (
    <div
      ref={containerRef}
      style={{
        height: '100vh',
        flexWrap: 'wrap',
        overflowY: 'auto',
        display: 'block',
      }}
    >
      {data.map((item, index) => (
        <div key={index}>{/* 渲染每个数据项 */}</div>
      ))}
    </div>
  );
};

export default YourComponent;

在上述代码中，我们将 `containerRef` 的类型声明为 `React.MutableRefObject<HTMLDivElement | null>`，表示它引用了一个 `HTMLDivElement` 元素或者是 `null`。这样可以避免 TypeScript 报错并确保类型安全。

希望这次回答能够解决您的问题。如果您还有其他疑问，请随时提问！