React集成Unity WebGL报错：Cannot read properties of null (reading 'useState')

我正在搭建一个包含WebGL应用的基础React网站，已成功遵循React入门指南，并尝试通过react-unity-webgl的简单示例集成Unity WebGL应用，但出现了**"Cannot read properties of null (reading 'useState')"**的空值错误。

相关资源：

• 错误信息截图
• VSCode目录结构截图
• WebGL应用在线示例

我的App.js代码如下：

import React from "react";
import { Unity, useUnityContext } from "react-unity-webgl";

function App() {
  const { unityProvider } = useUnityContext({
    loaderUrl: "Webbuild/Build/Webbuild.loader.js",
    dataUrl: "Webbuild/Build/Webbuild.data",
    frameworkUrl: "Webbuild/Build/Webbuild.framework.js",
    codeUrl: "Webbuild/Build/Webbuild.wasm",
  });
  
  return <Unity uunityProvider={unityProvider} />
}

export default App;

我尝试过查找其他解决方案，但大多不符合当前采用的简单示例场景，期望WebGL应用能像上述在线示例一样正常运行，恳请各位提供解决方案。

解决方案 #

1. 修正组件属性拼写错误 #

代码中<Unity>组件的属性名存在笔误：uunityProvider多了一个字母u，正确的属性名应为unityProvider。修正后代码的返回部分如下：

return <Unity unityProvider={unityProvider} />

2. 检查版本兼容性 #

useState空值错误常因React与react-unity-webgl版本不匹配导致。确认你的React版本（需18+）与react-unity-webgl版本适配，可执行以下命令更新：

# 升级React到最新稳定版
npm install react@latest react-dom@latest

# 安装适配版本的react-unity-webgl
npm install react-unity-webgl@latest

3. 验证Unity构建文件路径 #

从目录结构截图确认Webbuild文件夹是否位于项目的public目录下，确保loaderUrl等路径指向正确。若构建文件放在src目录下，需调整路径或配置webpack以处理静态资源。

4. 规范钩子使用方式 #

useUnityContext是React钩子，必须在函数组件的顶层调用，不可嵌套在条件语句或其他函数内，你的代码当前已符合要求，后续重构时需保持此规范。

按上述步骤逐一排查，优先修正拼写错误，大概率可解决当前问题。

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