react-snap 的 Firebase 问题

Question

我试图从主页上的 firebase 加载项目，但它一直给我一个错误。有人有什么建议吗？

我正在关注https://github.com/stereobooster/react-snap上的指南

并像这样实现它：

import React from 'react';
import {hydrate, render } from 'react-dom';
import './index.css';
import App from './components/App';
import * as serviceWorker from './serviceWorker';
import FirebaseProvider from './utils/firebase'

const rootElement = document.getElementById("root");
if (rootElement?.hasChildNodes()) {
  hydrate( <FirebaseProvider><App /> </FirebaseProvider> , rootElement);
} else {
  render(<FirebaseProvider><App /> </FirebaseProvider> , rootElement);
}

这是错误：

TypeScript error in /Users/bigbot/Desktop/buyid/src/index.tsx(11,12):
This JSX tag's 'children' prop expects a single child of type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)>', but multiple children were provided.  TS2746

     9 | const rootElement = document.getElementById("root");
    10 | if (rootElement?.hasChildNodes()) {
  > 11 |   hydrate(<FirebaseProvider> <App /> </FirebaseProvider>, rootElement);
       |            ^
    12 | } else {
    13 |   render(<FirebaseProvider><App /></FirebaseProvider>, rootElement);
    14 | }

Answer 1

还有一个额外的 ?在你的代码中。 我建议你尝试改变

if (rootElement?.hasChildNodes()) {
  hydrate( <FirebaseProvider><App /> </FirebaseProvider> , rootElement);
} else {
  render(<FirebaseProvider><App /> </FirebaseProvider> , rootElement);
}

到

if (rootElement.hasChildNodes()) {
  hydrate(<App />, rootElement);
} else {
  render(<App />, rootElement);
}