升级依赖后出现CookieConsentProvider类型错误，寻求非降级解决方案

问题 #

升级项目依赖包后，构建时触发类型错误：Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes & CookieConsentProviderProps'，此前项目运行正常，需在不降级依赖的前提下修复。

构建错误信息 #

./src/pages/_app.tsx:46:10
Type error: Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes & CookieConsentProviderProps'.

  44 |
  45 |       <SessionProvider session={session}>
> 46 |         <CookieConsentProvider>
     |          ^
  47 |           <AppContextProvider>
  48 |             {Component.auth ? (
  49 |               <Auth>

> Build error occurred
Error: Call retries were exceeded
    at ChildProcessWorker.initialize (C:\Projects\project1\node_modules\next\dist\compiled\jest-worker\index.js:1:11661)
    at ChildProcessWorker._onExit (C:\Projects\project1\node_modules\next\dist\compiled\jest-worker\index.js:1:12599)
    at ChildProcess.emit (node:events:526:28)
    at Process.ChildProcess._handle.onexit (node:internal/child_process:291:12) {
  type: 'WorkerError'
}
error Command failed with exit code 1.

相关代码 #

_app.tsx #

export interface CustomAppProps extends AppProps {
  Component: NextComponentType & { auth?: boolean };
}

function MyApp({ Component, pageProps: { session, ...pageProps } }: CustomAppProps) {
  return (
    <>
      <SessionProvider session={session}>
        <CookieConsentProvider>
          <AppContextProvider>
            {Component.auth ? (
              <Auth>
                <Component {...pageProps} />
              </Auth>
            ) : (
              <Component {...pageProps} />
            )}
          </AppContextProvider>
        </CookieConsentProvider>
      </SessionProvider>
    </>
  );
}

package.json 依赖片段 #

"dependencies": {
    "@tailwindcss/forms": "^0.5.2",
    "@use-cookie-consent/react": "^0.3.6",
    "autoprefixer": "^10.4.8",
    "axios": "^0.27.2",
    "bcryptjs": "^2.4.3",
    "dateformat": "^5.0.3",
    "formik": "^2.2.9",
    "next": "^12.2.4",
    "next-auth": "^4.10.3",
    "postcss": "^8.4.16",
    "qs": "^6.11.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.4.0",
    "sass": "^1.54.4",
    "sharp": "^0.30.7",
    "swr": "^1.3.0",
    "tailwindcss": "^3.1.8",
    "yup": "^0.32.11"
  },

解决方案 #

原因分析 #

@use-cookie-consent/react 0.3.x版本重构了API，CookieConsentProvider不再作为容器组件接受children属性，原有的包裹子组件的用法已被废弃，类型定义也同步更新，导致类型检查失败。

修复步骤 #

1. 调整CookieConsentProvider的用法：移除其包裹的子组件，单独放置即可完成全局配置
2. 在需要的地方使用弹窗组件：通过CookieConsent组件展示默认弹窗，或用useCookieConsent钩子自定义弹窗

修改后的_app.tsx

export interface CustomAppProps extends AppProps {
  Component: NextComponentType & { auth?: boolean };
}

function MyApp({ Component, pageProps: { session, ...pageProps } }: CustomAppProps) {
  return (
    <>
      <SessionProvider session={session}>
        {/* 移除children，单独放置Provider */}
        <CookieConsentProvider />
        <AppContextProvider>
          {Component.auth ? (
            <Auth>
              <Component {...pageProps} />
            </Auth>
          ) : (
            <Component {...pageProps} />
          )}
        </AppContextProvider>
      </SessionProvider>
    </>
  );
}

使用默认弹窗组件

在任意页面或全局布局中添加CookieConsent组件：

import { CookieConsent } from '@use-cookie-consent/react';

function Layout() {
  return (
    <div className="min-h-screen">
      {/* 页面内容 */}
      <CookieConsent />
    </div>
  );
}

自定义弹窗（可选）

使用useCookieConsent钩子实现完全自定义的弹窗逻辑：

import { useCookieConsent } from '@use-cookie-consent/react';

function CustomCookieBanner() {
  const { consent, acceptAll, acceptNecessary } = useCookieConsent();

  // 仅当用户未同意时显示弹窗
  if (consent.accepted) return null;

  return (
    <div className="fixed bottom-0 left-0 right-0 p-4 bg-gray-800 text-white">
      <p>我们使用cookies来提升体验，您可以选择仅接受必要cookies或全部接受。</p>
      <div className="mt-2 flex gap-2">
        <button onClick={acceptNecessary} className="px-4 py-2 bg-gray-700 rounded">
          仅必要cookies
        </button>
        <button onClick={acceptAll} className="px-4 py-2 bg-blue-600 rounded">
          接受全部
        </button>
      </div>
    </div>
  );
}

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