ファイル間の値の受け渡しについて

Question

やりたいこと

vanilaJsからtypescriptとreactを用いているファイルにコンポーネントとして値を渡したいのですが、うまくいきません、ご教授していただけないでしょうか？

・具体的には?

現在react-typescriptを用いて学習用のアプリの制作を行っています。
その中で、firebaseのログイン機能を利用しようとしています。
firebaseの設定はvanilaJsを用いていて、設定途中で作成した変数を、react-typescript側のファイルに値を渡したいと考えています。可能でしょうか？
変数のデータ型は"const"になっています。

ソース

import firebase from "firebase/compat/app";
import "firebase/compat/auth";
import "firebase/compat/firestore";

const firebaseApp = firebase.initializeApp({
//settings
});

//--この変数達をreact-typescriptのファイルに渡したい--//
const db = firebaseApp.firestore();
const auth = firebase.auth();
//----//

export { db, auth };

import React from "react";
import { FC } from "react";
import SingIn from "./components/SingIn";
import firebase from "firebase/compat/app";
import { useAuthState } from "react-firebase-hooks/auth";
import { auth } from "./firebase";

import "./App.css";
import Line from "./components/pages/Line";

function App() {
//-- -- -- --auth変数でエラーが出力されています-- -- -- --//
  const user = useAuthState(auth);

  return <div className="App">{user ? <Line /> : <SingIn />}</div>;
}

export default App;

よろしくお願いいたします。

Comments

[maisumakun]

エラーメッセージをご提示ください。

[teratail-boy]

maisumakunさん、
ご返信ありがとうございます。

---下記のエラーが出力されています。---
TS2345: Argument of type 'firebase.default.auth.Auth' is not assignable to parameter of type 'import("/front/node_modules/@firebase/auth/dist/auth-public").Auth'.
Property 'beforeAuthStateChanged' is missing in type 'firebase.default.auth.Auth' but required in type 'import("/front/node_modules/@firebase/auth/dist/auth-public").Auth'.
10 |
11 | function App() {
> 12 | const user = useAuthState(auth);
| ^^^^
13 |
14 | return <div className="App">{user ? <Line /> : <SingIn />}</div>;
15 | }
-- -- -- --

-- -- -- --vscode上では下記のエラーになっています。-- -- -- --
(alias) const auth: firebase.auth.Auth
import auth
型 'firebase.default.auth.Auth' の引数を型 'import("プロジェクト名/front/node_modules/@firebase/auth/dist/auth-public").Auth' のパラメーターに割り当てることはできません。
プロパティ 'beforeAuthStateChanged' は型 'firebase.default.auth.Auth' にありませんが、型 'import("/プロジェクト名/front/node_modules/@firebase/auth/dist/auth-public").Auth' では必須です。ts(2345)
auth-public.d.ts(376, 5): 'beforeAuthStateChanged' はここで宣言されています。
___

[teratail-boy]

よろしくお願いいたします。

Answer 1

useAuthStateの使い方を間違えていただけでした。
値はファイル間で正しく渡せてるみたいでした。
お騒がせしました。
ご返信していただきありがとうございました。