NextJS 13.4集成Redux RTK遇Provider类型错误求助

问题分析 #

你遇到的'Provider' refers to a value, but is being used as a type here错误，以及Provider组件被标记为未使用的灰色状态，本质是TypeScript对JSX组件的类型识别异常，通常和React导入、TS配置或编辑器缓存有关。

解决方案 #

1. 显式导入React #

在provider.ts顶部添加React的显式导入，确保TypeScript能正确识别JSX语法：

'use client'
import React from 'react'; // 新增这行
import { store } from './store';
import { Provider } from 'react-redux';

export function Providers({ children }: { children: React.ReactNode }) {
    return <Provider store={store}>{children}</Provider>;
}

2. 检查tsconfig.json的JSX配置 #

确保你的tsconfig.json中compilerOptions.jsx设置为react-jsx（Next.js 13+的默认配置，但可能被误修改）：

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react-jsx", // 确认这行存在且正确
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

3. 重启TypeScript服务 #

编辑器的TypeScript缓存可能导致识别异常，按以下步骤操作：

• 在VS Code中按Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac）
• 选择TypeScript: Restart TS Server

4. 确认依赖版本兼容性 #

确保你使用的react-redux和@reduxjs/toolkit版本适配Next.js 13.4，建议安装最新稳定版：

npm install react-redux@latest @reduxjs/toolkit@latest

验证修改 #

完成上述步骤后，重新编译项目：

npm run dev

此时provider.ts中的错误应该消失，Provider组件也会被正确识别为已使用。

内容的提问来源于stack exchange，提问作者Clément