[type] 类型的参数不可分配给 [type] 类型的参数

Question

我在运行 npx webpack 时收到此错误

Version: webpack 3.12.0
Time: 57478ms
        Asset     Size  Chunks                    Chunk Names
       app.js   172 kB       0  [emitted]         app
    vendor.js  7.91 MB       1  [emitted]  [big]  vendor
   app.js.map   256 kB       0  [emitted]         app
vendor.js.map  9.28 MB       1  [emitted]         vendor
  [21] ./angular/service.ts 3.92 kB {0} [built]
  [23] ./angular/Utility.ts 2.21 kB {0} [built]
  [37] (webpack)/buildin/global.js 509 bytes {1} [built]
  [42] ./angular/component/empty.ts 1.35 kB {0} [built]
  [66] ./angular/api.ts 3.15 kB {0} [built]
  [85] ./angular/modules/LoadComponentModule.ts 1.92 kB {0} [built]
 [250] ./angular/bootstrap.ts 2.58 kB {0} [built]
 [251] ./angular/env.json 325 bytes {0} [built]
 [587] ./angular/ErrorCatcher.ts 2.57 kB {0} [built]
 [588] ./angular/modules/MaterialModules.ts 2.4 kB {0} [built]
 [589] ./angular/modules/AFModules.ts 1.17 kB {0} [built]
 [594] ./angular/Pipes.ts 5.64 kB {0} [built]
 [595] ./angular/component/layout.ts 2.52 kB {0} [built]
 [601] ./angular/component/management/wrapper.ts 3.91 kB {0} [built]
 [605] ./angular/component/project/project_list.ts 4.87 kB {0} [built]
    + 595 hidden modules

ERROR in ./angular/component/search.ts
[tsl] ERROR in D:\nodeapps\myproject\angular\component\search.ts(101,34)
      TS2345: Argument of type 'string' is not assignable to parameter of type 'CollectionReference'.

ERROR in ./angular/component/search.ts
[tsl] ERROR in D:\nodeapps\myproject\angular\component\search.ts(102,26)
      TS2345: Argument of type 'CollectionReference' is not assignable to parameter of type 'Query | CollectionReference'.
  Type 'firebase.firestore.CollectionReference' is not assignable to type 'FirebaseFirestore.CollectionReference'.
    Property 'offset' is missing in type 'CollectionReference'.

文件中的错误行是this.collectionPath和org：

this.ref = this.afs.collection(this.collectionPath, org=>{
    var r = this.whereAll(org, this.requirementQuerys);
    this.params.forEach(p=>{
        r = this.whereAll(r, p.querys);
    });
    return this.orderBy ? r.orderBy(this.orderBy) : r;
});

这是我来自 package.json 的依赖项：

  "dependencies": {
    "firebase-admin": "^5.12.1",
    "firebase-functions": "^1.0.4",
    "firebase-tools": "^3.18.6"
  },
  "devDependencies": {
    "@angular/animations": "^5.2.5",
    "@angular/cdk": "^5.2.1",
    "@angular/cli": "^1.6.8",
    "@angular/common": "^5.2.5",
    "@angular/compiler": "^5.2.5",
    "@angular/core": "^5.2.5",
    "@angular/forms": "^5.2.5",
    "@angular/http": "^5.2.5",
    "@angular/material": "^5.2.1",
    "@angular/platform-browser": "^5.2.5",
    "@angular/platform-browser-dynamic": "^5.2.5",
    "@angular/router": "^5.2.5",
    "@google-cloud/functions-emulator": "^1.0.0-beta.4",
    "@types/hammerjs": "^2.0.35",
    "ajv": "^6.0.0",
    "angularfire2": "^5.0.0-rc.6",
    "concurrently": "^3.5.1",
    "es6-shim": "~0.35.3",
    "exports-loader": "~0.7.0",
    "expose-loader": "~0.7.4",
    "firebase": "^5.0.4",
    "glob": "^7.1.2",
    "hammerjs": "^2.0.8",
    "http-server": "^0.11.1",
    "imports-loader": "~0.7.1",
    "node-sass": "^4.7.2",
    "reflect-metadata": "~0.1.12",
    "rxjs": "^5.5.6",
    "ts-loader": "^3.5.0",
    "typescript": "^2.7.1",
    "webpack": "^3.11.0",
    "webpack-dev-server": "^2.11.1",
    "webpack-sources": "^1.1.0",
    "zone.js": "~0.8.20"
  },

这是我的webpack.config.js

require('./html_style');

const path = require('path');
const webpack = require('webpack');
const CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
const isVendor = function(module){return module.context && module.context.indexOf("node_modules") !== -1;};

module.exports = {
  devtool: 'source-map',
  watch: false,
  entry: {
    'app': './angular/bootstrap.ts'
  },
  output: {
    filename: '[name].js',
    path: path.resolve('./public/angular')
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js']
  },
  module: {
    exprContextCritical: false,
    loaders: [
      { test: /\.ts?$/, exclude: /node_modules/, loader: 'ts-loader' }
    ]
  },
  plugins: [
    new CommonsChunkPlugin({name: 'vendor', minChunks: isVendor})
  ]
}

我一直在谷歌搜索，但没有运气。任何想法？我的平台是Windows。我的node版本是10.9.0，npm版本是6.4.0。

Answer 1

您的问题有点类似于https://github.com/angular/angularfire2/issues/1467。当您的 angularfire2 和 firebase 库版本不匹配时，就会发生这种情况。您的问题的解决方案是使用强类型。我已经修改了你的代码，所以你会有一个如何解决你的问题的例子：

import { AngularFirestore, Query, QueryFn } from 'angularfire2/firestore';

let query: QueryFn = org => {
    let r: Query = this.whereAll(org, this.requirementQuerys);
    this.params.forEach(p => {
        r = this.whereAll(r, p.querys);
    });
    return this.orderBy ? r.orderBy(this.orderBy) : r;
};
this.ref = this.afs.collection(this.collectionPath, query);

以防万一您仍有问题，我使用了"angularfire2": "^5.0.0-rc.12" 和"firebase": "^5.4.0"。将来查看 angularfire2 github 问题以解释如果在下一次更新依赖项后您的项目不起作用，哪些版本是兼容的。

Answer 2

认为这一行暗示了主要问题： Type 'firebase.firestore.CollectionReference' is not assignable to type 'FirebaseFirestore.CollectionReference'. 显然有两个不同的 CollectionReference 类。一个位于 firbase.firestore，另一个位于 FirebaseFireStore。那么可能你有错误的导入？