React类型错误：HTMLElement|null无法赋值给ReactNode，迷宫网格无法显示

一、解决'HTMLElement | null' 无法赋值给 'ReactNode' 类型错误 #

该错误的核心原因是你尝试将原生DOM对象（或可能为null的DOM引用）作为React组件的返回值，而React组件的返回值必须是ReactNode类型（JSX元素、字符串、数组等），而非原生DOM元素。

修复要点： #

• 绝对不要在组件的返回逻辑中直接返回document.getElementById()或ref.current这类DOM对象，它们不属于React渲染体系。
• 若需操作DOM，使用useRef仅作为获取DOM引用的工具，渲染逻辑仍通过JSX实现。

错误示例与修正：

错误写法：

function Maze() {
  const containerRef = useRef(null);
  // 错误：返回DOM元素而非React节点
  return containerRef.current;
}

正确写法：

import { useRef } from 'react';

function Maze() {
  const containerRef = useRef(null);
  
  // 通过JSX渲染内容，ref仅用于后续DOM操作（如测量尺寸）
  return (
    <div ref={containerRef} className="maze-wrapper">
      {/* 网格内容在这里渲染 */}
    </div>
  );
}

二、实现可正常显示的4x4迷宫网格 #

通过嵌套循环生成JSX元素，配合CSS Flexbox实现网格布局，以下是完整可运行的示例：

组件代码（Maze.jsx）： #

import React from 'react';
import './Maze.css';

function Maze() {
  // 生成4行4列的网格数据结构
  const gridSize = 4;
  const mazeCells = Array.from({ length: gridSize }, (_, row) =>
    Array.from({ length: gridSize }, (_, col) => ({ row, col, id: `cell-${row}-${col}` }))
  );

  return (
    <div className="maze-grid">
      {mazeCells.map((row, rowIndex) => (
        <div key={`row-${rowIndex}`} className="maze-row">
          {row.map(cell => (
            <div key={cell.id} className="maze-cell">
              {/* 可根据需求添加格子状态，比如墙、路径标记 */}
              {cell.row + 1},{cell.col + 1}
            </div>
          ))}
        </div>
      ))}
    </div>
  );
}

export default Maze;

样式文件（Maze.css）： #

.maze-grid {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 1rem;
}

.maze-row {
  display: flex;
  gap: 3px;
}

.maze-cell {
  width: 60px;
  height: 60px;
  background-color: #f0f0f0;
  border: 1px solid #333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

三、最终验证 #

1. 在App.jsx中导入并渲染Maze组件：

import Maze from './Maze';

function App() {
  return (
    <div className="App">
      <h1>4x4迷宫</h1>
      <Maze />
    </div>
  );
}

export default App;

2. 启动项目后，即可看到整齐的4x4网格，同时类型错误已消除。

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